Problem downloading a PDF blob in JavaScript

I tried using Fetch API to download the PDF file from server which is giving octet-stream content as response. So, if you check the response, you will get characters like these %PDF-1.4

Here is the solution:

function download(pdfUrl) {
        fetch(pdfUrl).then(resp => resp.arrayBuffer()).then(resp => {

            // set the blog type to final pdf
            const file = new Blob([resp], {type: 'application/pdf'});

            // process to auto download it
            const fileURL = URL.createObjectURL(file);
            const link = document.createElement('a');
            link.href = fileURL;
            link.download = "FileName" + new Date() + ".pdf";
            link.click();
        });
    }

You can use the same method and decode the content of the octet-stream before creating the blob.

I can't tell for sure why your code doesn't work, but I can tell for sure that what you are doing is useless at best.

Do not convert a Blob to a dataURI, 99%* of the time, what you want to do with this dataURI can be done directly with the original Blob and a blobURI.

^{*The remaining 1% being when you need to create standalone documents that will include binary data, it happens but not that often.}

Here, once again what you want to do (set an anchor to point to your Blob's data) can be done with the Blob directly: simply create a blobURI (which is just a pointer to the data in memory) by calling URL.createObjectURL(blob).

const downloadFile = (blob, fileName) => {
  const link = document.createElement('a');
  // create a blobURI pointing to our Blob
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  // some browser needs the anchor to be in the doc
  document.body.append(link);
  link.click();
  link.remove();
  // in case the Blob uses a lot of memory
  setTimeout(() => URL.revokeObjectURL(link.href), 7000);
};


downloadFile(new Blob(['random data']), "myfile.txt");