How can I download a pdf from a url using javascript? - javascript

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.

Related

Download PDF from url react

I have a publicly accessible url to a PDF in Google Cloud Storage. I want to be able to create a button/link in react which allows users to download this PDF to their own computer. I'm wondering what is the best approach to do this and which libraries would be of help? Is there any documentation on this? Thanks
In order to force download a file, you have a number of options. First, the easiest is using the download attribute of an anchor tag:
PDF
However, this is not supported on IE and a number of other browsers in their earlier versions. But the maximum impact of this is it will open in a new tab which in my opinion is graceful degradation. See the full list of supported versions.
If this is not enough, you have to make some changes server-side. You can configure a server in many ways, but as an example, a .htaccess file can have the following:
<Files *.pdf>
Header set Content-Disposition attachment
</Files>
You can dynamically generate a link or button. Snippet bellow:
var sampleBytes = new Int8Array(4096); // In your case it should be your file
var saveByteArray = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, name) {
var blob = new Blob(data, {type: "octet/stream"}), // or application/pdf
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
};
}());
saveByteArray([sampleBytes], 'example.txt'); // You can define the filename

Download file generated in MS Teams tab

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.

How to make a pdf generator ? (postcard)

I'm willing to invite all my friends to my wedding, I have all the addresses in an Excel and I made a postcard in html using jQuery and urlParams to make every postcard personal.
Now I am stuck at the point where I want to turn all the pages into PDFs to print them (I'd like to have one big PDF with page 1 guy1 front, page 2 guy1 back, page 3 guy2 front and so on...)
I've tried with jspdf like this:
var doc = new jsPDF('landscape','pt');
doc.fromHTML(documtent.body,100,100,{});
doc.save('bigpdf');
but it gets my html all messed up and it doesn't look like on browser (and it has no background)
I've also tried html2canvas:
html2canvas(document.body).then(canvas => {
saveAs(canvas, 'bigpdf');
});
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
but the downloaded file has no <p> tag on it nor QR code (I made a qr code to track who is coming)
I hope you'll find my solution
Many thanks in advance

Unable to export .csv file in IE browser

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.

Download file without extension with JavaScript

I wanna download some files through js.
The following code works fine when the file has an extension ie. http://example.com/img.jpg, but when it doesn't ie. http://example.com/img it just redirects me to a blank page with the file, as a normal link does.
function downloadURI(uri) {
var link = document.createElement('a');
link.href = uri;
link.click();
}
How do I get over this issue, and make the browser to download?
Simply tell your browser that it's a download:
function downloadURI(uri) {
var link = document.createElement('a');
link.href = uri;
link.download = 'download';
link.click();
}
downloadURI('test')

Categories

Resources