Download PDF from url react

Question

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

I tried the answer here:https://stackoverflow.com/questions/50694881/how-to-download-file-in-react-js but it just opens a tab with the file. I'm trying to allow the user to download the file to their computer when clicked. I am using chrome — Allen Wu, Dec 23 '20 at 17:06
In order to get better help, your question should show specifically what you tried that doesn't work the way you expect. — Doug Stevenson, Dec 23 '20 at 17:15

Dean James · Answer 1 · 2020-12-23T17:57:34.757

0

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:

<a href="foo.pdf" download target="_blank">PDF</a>

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>

edited Dec 23 '20 at 17:57

answered Dec 23 '20 at 17:14

Dean James

2,491
4
21
29

I tried this example in chrome: PDF however it still just opens the pdf in a new tab and doesn't download to the user's computer – Allen Wu Dec 23 '20 at 17:16
I'm not sure what that issue is - you can see this working here: https://codesandbox.io/s/vibrant-wiles-21xu4. – Dean James Dec 23 '20 at 17:58
I tried your example but it won't download. – Aljohn Yamaro May 18 '21 at 12:30
Maybe a browser difference. Which browser do you use? – Dean James May 18 '21 at 14:27

score -1 · Answer 2 · answered Dec 23 '20 at 18:03

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 PDF from url react

2 Answers2