'Latest version of iOS Chrome not downloading blobs correctly (pdf)
The below code samples works with:
- Chrome Android
- Chrom Windows
- Safari iPhone
- Safari Mac
- Chrome Mac
Doesn't work with:
- Chrome iPhone
Sample 1
var oReq = new XMLHttpRequest();
var URLToPDF = fileUrl;
oReq.open('GET', URLToPDF, true);
oReq.responseType = 'blob';
oReq.onload = function () {
const file = new Blob([oReq.response], { type: 'application/pdf' });
const fileURL = URL.createObjectURL(file);
window.open(fileURL, '_blank');
};
Sample 2
Axios(fileUrl, {
method: 'GET',
responseType: 'blob',
})
.then((response) => {
const file = new Blob([response.data], { type: 'application/pdf' });
const fileURL = URL.createObjectURL(file);
window.open(fileURL);
})
.catch((error) => {
console.log(error);
});
Sample 3
import { saveAs } from 'file-saver';
fetch(fileUrl, {
method: 'get',
}).then((response) => response.blob())
.then((blobContent) => {
var blob = new Blob([blobContent], { type: 'application/pdf' });
saveAs(blob, 'test.pdf');
});
Solution 1:[1]
Facing similar issue with ios/chrome. As workaround tried with below solution.
this.blobURL = URL.createObjectURL(
new Blob([resp], {
type: 'application/pdf;charset=utf-8;'
})
);
const k = document.createElement('a');
k.setAttribute('href', this.blobURL);
k.setAttribute('target', '_blank');
k.click();
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | santsh B |
