giannisf
giannisf

Reputation: 2599

Safari downloads blob file as example.com

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

Answers (1)

giannisf
giannisf

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

Related Questions