Home > database >  Javascript code works fine to download images but not to download a PDF file
Javascript code works fine to download images but not to download a PDF file

Time:10-21

The following code works properly to download remote images, but did not work when altering it to download remote PDF file, here is the code I am using:

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" data-remote>Remote PDF</a>

 <script defer type="text/javascript">
    const a = document.querySelector('a[data-remote]')
    a.addEventListener('click', async (e) => {
      e.preventDefault()
      const file = await fetch(e.target.href);
      const blob = await file.blob();
      const blobUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement("a");
      downloadLink.href = blobUrl;
      downloadLink.download = 'file.pdf';

      downloadLink.click();
    })
  </script>

CodePudding user response:

You could add download property to a tag and remove the script to download the pdf.

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" download >Remote PDF</a>

Or if you want to use js to download it, consider to add mode:'no-cors' when you fetch

  • Related