使用 AJAX 下载的文件未打开

Question

I have an issue with downloading a file with Ajax request, the file downloads successfully but it can't be opened. I don't know what I am missing. Your help is appreciated with the details given below.

Thank you.

I have a JSP page with list of attachments, each with a Download button.

When clicked on Download it calls the function named downloadFile( url )

The code on download button

<button onclick= "downloadFile('ProcessControllerHelper?action=download&attachmentId=<%=attachment.getAttachmentId() %>')" class="btn btn-sm btn-round btn-default"><bean:message key="lbl.download"/></button>

The function downloadFile that executes on download button

function downloadFile( url )
    {
        $.ajax({
            type: "GET",
            url: url,
            headers: {
                'Content-Type': 'application/octet-stream'
            },
            success: function(response, status, xhr) {
                // check for a filename
                var filename = "";
                var disposition = xhr.getResponseHeader('Content-Disposition');
                if (disposition && disposition.indexOf('attachment') !== -1) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                }
        
                var type = xhr.getResponseHeader('Content-Type');
                var blob = new Blob([response], { type: type });
        
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    // IE 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);
                } else {
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);
        
                    if (filename) {
                        // use HTML5 a[download] attribute to specify filename
                        var a = document.createElement("a");
                        // safari doesn't support this yet
                        if (typeof a.download === 'undefined') 
                        {
                            window.location.href = downloadUrl;
                        } else 
                        {
                            a.href = downloadUrl;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.click();
                        }
                    } else {
                        window.location.href = downloadUrl;
                    }
        
                    setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                }
            }, error: function(error) {
                alert('<bean:message key="attachment.not.found" />');   
            }
        });
        
    }

When clicked on download button it downloads the files successfully, which can't be opened like in the screenshot at last.

The issue is that the file downloaded is not being opened, and the error is something like we don't support the format

Appreciate your help!

Answer 1

I used the below function from the api ( http://danml.com/js/download2.js ), and it worked fine for me.

function downloadFile( url )
    {
        var flag = 1;
        fetch(url, {
            method: "GET",
            headers: {
                    "Content-Type": "application/json; charset=utf-8"
                }
            })
            .then(response => {
                if (response.status === 200) {
                    filename = response.headers.get("content-disposition").split(";")[1].split('"')[1];
                    return response.blob();
                } else {
                    alert('Attachment not found!');
                    flag = 0;
                    return;
                }
            })
            .then(body => {
                if(flag > 0 ) {
                    download(body, filename, "application/octet-stream");
                }
            });
    
    }