FileSaver.js 不使用 Safari 下载 PDF

Question

I have an issue with FileSaver.js , I can not download a PDF (or PNG or excel file) on Safari, but it works on any other web browser. I get the error in the console : 'Failed to load resource: The network connection was lost.'

What is weird is that, this PDF file doesn't get downloaded if Tomcat serves it, but if it is Apache that serves the file, the download works fine.

Here is a sample of code (I am working with angular 1.5.8):

$http.get(url, { responseType: 'arraybuffer' })
            .success(function (response) {
                var file = new Blob([response], {type: 'application/pdf'});
                fileSaverService(file, filename);
            });

Answer 1

I had a similar issue and I was using axios to make a call (it was post request in my case) to the download service. The code below worked for me:

axios.post(url, downloadRequest, {responseType:'blob'})
    .then(response =>{              
        var filename = 'example.zip';
        var blob = new Blob([response.data], {type:"application/octet-stream"});
        saveAs(blob , filename);
    })
    .catch(error => {
        console.error(error);       
    });

Answer 2

I had a issue with base64,Pdf was not able to open. This i have resolved converting base64 to bin and than converted into Uint8Array(byteNumbers) . Check below snippet which has worked for me.

const byteCharacters = atob(b64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
   byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
            
var blob = new Blob([byteArray], {type: "application/pdf"});
saveAs(blob, "sample.pdf");