I am building a MS Teams app, that should run in a tab. How can I let the user download a file in the app that was generated in the client? In a normal web app running outside Teams I am able to use the saveAs function in https://github.com/eligrey/FileSaver.js, but it doesn't seem to work inside a Teams tab.
I also have tried using the microsoftTeams.openFilePreview(...) function with objectUrl set to a data Url, but it doesn't seem to work either.
Any suggestions?
Could you please try with below code,
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
return ifrm;
I have implemented and tested the above code, it is working as expected.
I couldn't get the solution with iframe to work with a data url, but this solution works:
const link = document.createElement('a');
link.download = filename;
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
where url is a data url (for instance data:application/pdf;base64,JVBERi0xLjMKJbrfrOAKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQ...), and filename is the name of the file to download.
Related
I need to download pdf's from one of our online resources.There is no built in function to batch download.The only way to do it is to navigate to each pdf file, click to open, then click download.
There are several thousand files and this would take a very long time to do.
I got around this in the past using javascript. I gathered all the links to the pdfs, put them in a csv, and had the code loop through each link, download, and move onto the next link.
Unfortunately, I have lost that code and my efforts to recreate it have been unsuccessful.
I have tried everything in this article: How to download PDF automatically using js?
I have tried the code from this article (which I'm pretty sure is what I did before): https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
This is what I think should work...per the second article I referenced above
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));
}
var fileURL = "link/to/pdf";
var fileName = "test.pdf";
download(fileURL,fileName);
The code above is just to test download one file from a hardcoded URL. If it worked as intended, when the page is loaded, it should download the pdf from the provided url. Instead, it doesn't do anything on load or refresh.
Any suggestions?
Please check
https://stackoverflow.com/a/18983688/6923146
click me
Another one
https://stackoverflow.com/a/45905238/6923146
function download(url, filename) {
fetch(url).then(function(t) {
return t.blob().then((b)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(b);
a.setAttribute("download", filename);
a.click();
}
);
});
}
download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,Hello Developer!", "HelloDeveloper.txt");
I hope it helpfull
https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
You must add link element to DOM
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
var fileURL = "https://cdn.sstatic.net/clc/img/jobs/bg-remote-header-sm.png";
var fileName = "test.pdf";
download_file(fileURL, fileName); // fix function name
Link must be in same origin
The download attribute on anchor was ignored because its href URL has a different security origin.
I'm using Polymer Iron Ajax to get a PDF document from the server. However, when forcing a download on the client, Chrome (Version 65.0.3325.181) shows the message "Pop-up blocked" - which is not acceptable from a usability point of view. Any ideas how to get around this so the download is not blocked? I've simplified the code below as the PDF is dynamically generated using Puppeteer from data contained in the ajax request.
Server code using Express.js:
response.type('application/pdf');
response.attachment('resume.pdf');
response.send(mypdf);
app.listen(8080)
Polymer App code:
<iron-ajax id="myironajax" method="GET" handle-as="blob" on-response="handlePdfResponse" url="http://localhost:8080/pdf"></iron-ajax>
handlePdfResponse(e) {
var file = new Blob([e.detail.response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
var a = document.createElement('a');
a.href = fileURL;
a.target = '_blank';
a.download = 'myfile.pdf';
document.body.appendChild(a);
a.click();
}
Any help greatly appreciated. Thanks.
I'm working with an existing Electron project (convert web app to desktop app), which has a task that is to export content on screen to pdf/png/jpg.
Here is the situation:
The desktop app is purely client-side code, it doesn't connect to any API or server (just in case you suggest a solution using Nodejs server-side code)
I got the dataUrl from canvas object already (it's a base64 string of the file)
How can I save that dataUrl into a file (pdf/png/jpg)?
Here are some ways that I tried:
The good old window.location = dataUrl (nothing happens)
Create a form inside the div, action = dataUrl, then submit the form
Both ways are not working!
Thank you very much
For the download to occur the MIME type of the data URI needs to be changed to "application/octet-stream"
var dataURL = "data:text/plain,123";
var form = document.createElement("form");
form.action = dataURL.replace(/:[\w-/]+(?=,)/, ":application/octet-stream");
form.method = "GET";
document.body.appendChild(form);
form.submit();
Using <a> element with download attribute
var dataURL = "data:text/plain,123";
var a = document.createElement("a");
a.download = "file";
a.href = dataURL;
document.body.appendChild(a);
a.click();
See also How to download a file without using <a> element with download attribute or a server??
I'm trying to export my data as CSV file. I wrote below code, that is working fine in Firefox/Chrome but not in IE. I need to make work in IE8/9/10 versions. Thanks in advance.
JS code:
var CSVgen = function (CSV, ReportName) {
//Generate a file name if empty is replace by _.
var fileName = ReportName.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;Content-Type:application/octet-stream;Content-Disposition: attachment;charset=utf-8,' + escape(CSV);
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
And i tried below ways also:
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
and
var uri = 'Content-Type:application/octet-stream;Content-Disposition:
attachment;' + escape(CSV);
But no luck. I'm getting below error page in IE:
The webpage cannot be displayed
Most likely cause:
•Some content or files on this webpage require a program that you don't have installed.
What you can try:
Search online for a program you can use to view this web content.
Retype the address.
Go back to the previous page.
Anchor tag not downloading file in IE, instead it gives the option to search for app in app store to open file. For chrome and FF this code is working fine. I don't know this is happening in windows 7 or not as I am using windows 8.1 and windows 7 don't have option for apps.
var a = document.createElement("a");
a.href = filepath;
a.download = filename;
a.click();
Any help will be highly appreciated.
Thanks.
Directly quoting from SOpost
Internet Explorer does not presently support the Download attribute on A tags.
See http://caniuse.com/download and http://status.modern.ie/adownloadattribute; the latter indicates that the feature is "Under consideration" for IE12.
this might help:
var blob = new Blob([response.responseText], { type: headers['content-type'] });
if (navigator.msSaveOrOpenBlob) {
//Launches the associated application for a File or Blob saving for non webkit based browser such as safari or IE
navigator.msSaveOrOpenBlob(blob, "cvSummary.xml");
}
else {
//code for webkit based browser
var link = document.createElement('a');
document.body.appendChild(link);
link.style = "display: none";
var url = window.URL.createObjectURL(blob);
link.href = window.URL.createObjectURL(blob);
link.download = "cvSummary.xml";
link.dataset.downloadurl = ["text/xml", link.download, link.href].join(':');
link.click();
window.URL.revokeObjectURL(url);
}