I have PDF download functionality in my web app. It is working fine with all the browsers and iOS11 but it's not working on safari browser and ios12 on mobile or iod pro. I am getting below error - WebKitBlobResource error 1
export const downloadPDF = (downloadLink, fileName, trackId, productId, historyId) => {
return (dispatch) => {
return request.doGetAuth(downloadLink).then(response => {
let contentType = response.headers.get('content-type');
if (_.includes(contentType, 'application/json')) {
return response.json();
} else {
return response.blob();
}
}).then(blobby => {
if (!blobby.message) {
const blob = new Blob([blobby], {
type: 'application/pdf'
});
if (isIos()) {
if (!isCriOs()) {
// For ios
let url = window.URL.createObjectURL(blob);
dispatch(downloadReadyAction(url, fileName));
} else {
// if chrome
let reader = new FileReader();
reader.onload = function(e) {
dispatch(downloadReadyAction(reader.result, fileName));
}
reader.readAsDataURL(blob);
}
} else {
FileSaver.saveAs(blob, fileName);
}
}
}).catch(err => {
console.log('Problem downloading pdf from server ' + err)
})
}
}
I have PDF download functionality in my web app. It is working fine with all the browsers and iOS11 but it's not working on safari browser and ios12 on mobile or iod pro. I am getting below error - WebKitBlobResource error 1
export const downloadPDF = (downloadLink, fileName, trackId, productId, historyId) => {
return (dispatch) => {
return request.doGetAuth(downloadLink).then(response => {
let contentType = response.headers.get('content-type');
if (_.includes(contentType, 'application/json')) {
return response.json();
} else {
return response.blob();
}
}).then(blobby => {
if (!blobby.message) {
const blob = new Blob([blobby], {
type: 'application/pdf'
});
if (isIos()) {
if (!isCriOs()) {
// For ios
let url = window.URL.createObjectURL(blob);
dispatch(downloadReadyAction(url, fileName));
} else {
// if chrome
let reader = new FileReader();
reader.onload = function(e) {
dispatch(downloadReadyAction(reader.result, fileName));
}
reader.readAsDataURL(blob);
}
} else {
FileSaver.saveAs(blob, fileName);
}
}
}).catch(err => {
console.log('Problem downloading pdf from server ' + err)
})
}
}
Share
Improve this question
edited Oct 3, 2018 at 10:11
Kalashir
asked Oct 3, 2018 at 7:14
KalashirKalashir
1,1274 gold badges16 silver badges41 bronze badges
1
- I was confused by the "isIos" function that i thought for a second was a native javascript function...So more information here on how to create your own isIos function : stackoverflow./questions/9038625/detect-if-device-is-ios – Lal Commented Sep 1, 2022 at 10:35
1 Answer
Reset to default 5When we open pdf in new url tab , The file doesn't exist but its only cache stored inside the browser. So when we generate the blob and redirect to current tab to point to the generated blob url, We lose the cache. So opening url in new window helps it.
let url = window.URL.createObjectURL(blob);
window.open(url, "_blank");