2

I am trying to download the pdf from this url :

http://www.africau.edu/images/default/sample.pdf

I followed the example and wrote the code below.


import { saveAs } from "file-saver";


const downloadPDF = ()=>{
  var FileSaver = require("file-saver");
  FileSaver.saveAs(
    "http://www.africau.edu/images/default/sample.pdf",
    "somehthing.pdf"
  );
}

However, when the downloadPDF function is invoked on the button pressed. The file is not being saved. The pdf is simply being opened in the new tab. The screenshot of what the pdf looks like in the new tab is shown below. enter image description here

How do I save the pdf file?

Also, is this approach to get the pdf even valid in the first place or is axios.get() more preferred approach to get the file, then save the response file (response.body) via FileSaver.saveAs()

If the question is unclear, please let me know in the comment before flagging - I will make the necessary update. Thank you

juliomalves
  • 42,130
  • 20
  • 150
  • 146
constantlyFlagged
  • 360
  • 1
  • 19

1 Answers1

4

seems like the FileSaver does not help.

However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatiblity.

as far as I know, there are 2 ways to download file in browser.

  1. server returns a response with header Content-Disposition with value attachment or header Content-Type with value application/octet-stream. Browser will promote the SaveDialog and handle this download for you. This is preferred way to download but this requires you to have control over the server.

  2. you just use ajax or axios to get the data of any file at anywhere. then you create a dummy link to download (like this one). then browser will promote for SaveDialog and then save file to disk. This is just fine for small file but not for large files because you have to store entire file in memory before saving it to local disk.

I think option 2 is appropriate for you.
Example here. In this example, I place a file named abc.json in public folder. Note that the server must enable cors for your website origin. otherwise, there's no way for you to access that file in javascript code.

irous
  • 401
  • 3
  • 8
  • How would i use fetch / axios get to feed that into the dummy link? Would you be able to post an example with the above link?? I have tried it but i keep getting a corrupt pdf – constantlyFlagged Sep 08 '22 at 17:12
  • 1
    @constantlyFlagged yes, I will update my answer with the code soon – irous Sep 08 '22 at 17:16
  • @constantlyFlagged I updated. I tried with the link pdf you give but that server doesn't set up cors so probably you can't download it in browser. – irous Sep 08 '22 at 18:14
  • 2
    there's a workaround such as writing your own nodejs server which downloads that file for you then respond your download request. but that's a long story... – irous Sep 08 '22 at 18:22
  • 2
    Yes, in fact, that was the approach I had the take. This is a next.js project, so downloaded the file on the server-side --using the "handleDownload" function you created, then send the response to the front-end, and then downloaded it using the "download" function you had created. Thank you for your answer!! – constantlyFlagged Sep 09 '22 at 00:54