使用 AJAX 下载的文件无法打开

Question

我在使用 Ajax 请求下载文件时遇到问题，文件下载成功但无法打开。我不知道我错过了什么。感谢您提供以下详细信息。

谢谢。

我有一个带有附件列表的 JSP 页面，每个附件都有一个下载按钮。

当点击Download时，它会调用名为downloadFile(url)

的函数

下载按钮上的代码

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

在下载按钮上执行的downloadFile函数

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" />');   
            }
        });
        
    }

当点击下载按钮时，文件下载成功，最后无法像截图那样打开。

问题是下载的文件没有打开，错误类似于我们不支持格式

感谢您的帮助！

Answer 1

我使用了 api (http://danml.com/js/download2.js) 中的以下函数，对我来说效果很好。

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");
                }
            });
    
    }