Reputation: 2599
I am using an Ajax POST request to generate a PDF document and send it to the user. Everything works normally in Chrome, Edge, Firefox but Safari on Mac and IPhone downloads the file as example.com.
I am using this function that I found SO:
function downloadFile(data, filename, mime) {
// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
const blob = new Blob([data], {type: mime || 'application/octet-stream'});
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE doesn't allow using a blob object directly as link href.
// Workaround for "HTML7007: One or more blob URLs were
// revoked by closing the blob for which they were created.
// These URLs will no longer resolve as the data backing
// the URL has been freed."
window.navigator.msSaveBlob(blob, filename);
return;
}
// Other browsers
// Create a link pointing to the ObjectURL containing the blob
const blobURL = window.URL.createObjectURL(blob);
const tempLink = document.createElement('a');
tempLink.setAttribute('download', filename);
tempLink.style.display = 'none';
tempLink.href = blobURL;
// Safari thinks _blank anchor are pop ups. We only want to set _blank
// target if the browser does not support the HTML5 download attribute.
// This allows you to download files in desktop safari if pop up blocking
// is enabled.
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(blobURL);
}, 500);
}
this is the ajax request:
$.ajax({
url: '{{ path('create_list') }}',
data: data,
processData: false,
contentType: false,
cache: false,
type: 'post',
enctype: 'multipart/form-data',
xhrFields: {
responseType: 'blob'
},
success: function(data, status, xhr) {
model.isCreating(false);
let date = new Date();
let name = `${model.wineList.companyName() }
_${date.getHours()}
_${date.getMinutes()}
_${date.getSeconds()}.pdf`;
downloadFile(data, name, 'application/pdf')
Swal.close();
{% if app.debug %}
console.log(data);
{% endif %}
-----------
I checked that Safari supports the a.download attribute but for some reason ignores it.
Any idea what might be the problem?
Upvotes: 0
Views: 836
Reputation: 2599
The problem was at this line:
let name = `${model.wineList.companyName() }
_${date.getHours()}
_${date.getMinutes()}
_${date.getSeconds()}.pdf`;
for some reason, the line breaks made Safari to revert to example.com ignoring the name.
Upvotes: 1