jquery - 在不使用 Cookie 的情况下，使用 JQuery 下载带有加载器或进度表的 Excel 或其他二进制文件

Question

在不使用 cookie 的情况下使用 JQuery 下载 Excel 或其他二进制文件时，如何向用户显示“加载”小部件或进度表？

标签： jqueryajaxcookiesfetchfilesaver.js

Answer 1

    $.ajax(url, {
        xhrFields: {
            responseType: 'arraybuffer'
        },
        success: function(data, textStatus, jqXHR) {
            var blob = new Blob([data], {type: jqXHR.getResponseHeader('content-type')});
            var fileName = jqXHR.getResponseHeader('content-disposition').split('filename=')[1].split(';')[0];
            saveAs(blob, fileName);
        },
        progress: function(e) {
            if (e.lengthComputable) {
                const completedPercentage = Math.round((e.loaded * 100) / e.total);
                if (completedPercentage >= 100) {
                    $("#loader").dialog("close");
                }
            }
            else {
                if (console) {
                    console.log('Content length not reported. Fix this server side.');    
                }
            }
        }
    });

Fetch API 似乎是通过 ajax 提取二进制文件的更好方法，但不支持 IE，这对我来说是必需的。这是我查看的代码，以防它帮助任何人。我没有添加关闭“加载器”逻辑，但我很确定您可以在保存文件之前或之后执行此操作。

    fetch(url, {
        responseType: 'blob'
    }).then(response => response.blob())
      .then(blob => saveAs(blob, 'test.xlsx'));

这个答案是从网络和几个 SO 帖子拼凑而成的。相关链接见下文：

• https://stackoverflow.com/a/47197970/1048376（JQuery和通过 $.ajax() 下载二进制数据）
• https://stackoverflow.com/a/48437227/1048376（JQuery和通过 $.ajax() 下载二进制数据 - 我使用了这个解决方案）
• https://github.com/likerRr/jq-ajax-progress（轻量级 jQuery 插件，增加了对 $.ajax() 的进度和uploadProgress 承诺的支持 - 我使用了这个解决方案）
• http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ （你可以用这个代替上面的插件）
• https://github.com/eligrey/FileSaver.js（FileSaver 插件主页 - 我使用了这个解决方案）
• https://stackoverflow.com/a/25186103/1048376（使用 FileSaver）
• https://github.com/axios/axios（只是看了这个，没有尝试实现）https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API （比JQuery好但是不兼容 IE，所以不适合我）
• https://stackoverflow.com/a/62173022/1048376（如何从标题中获取文件名 - 我使用了这个解决方案）
• http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/（fileDownload插件主页）
• https://stackoverflow.com/a/9970672/1048376（文件下载插件创建者 John Culviner 的优秀帖子。我使用这个插件已经很多年了，但是 Vericode 扫描迫使我全面使用 HttpOnly cookie（叹气).)