javascript - 如何为HTTP GET 请求设置header，并触发文件下载？

Question

更新 20140702:

• The solution
• Detailed answer as a blog post

(但我将其他答案之一标记为已接受，而不是我自己的，因为它让我走到了一半，并奖励我的努力)

---

似乎无法通过带有 <a href="..."> 的链接设置 HTTP 请求 header 。 , 并且只能使用 XMLHttpRequest 来完成.

但是，链接到的 URL 是一个应该下载的文件(浏览器不应导航到它的 URL)，我不确定这是否可以使用 AJAX 完成。

此外，返回的文件是二进制文件，AJAX 不适用于此。

如何使用添加了自定义 header 的 HTTP 请求触发文件下载？

编辑:修复损坏的链接

Answer 1

有两种方法可以下载文件，其中 HTTP 请求需要设置 header 。

第一个归功于@guest271314，第二个归功于@dandavis。

第一种方法是使用HTML5 File API创建一个临时的本地文件，第二种是将 base64 编码与数据 URI 结合使用。

我在项目中使用的解决方案对小文件使用base64编码方式，或者当 File API 不可用时，否则使用文件 API 方法。

解决方法:

        var id = 123;

        var req = ic.ajax.raw({
            type: 'GET',
            url: '/api/dowloads/'+id,
            beforeSend: function (request) {
                request.setRequestHeader('token', 'token for '+id);
            },
            processData: false
        });

        var maxSizeForBase64 = 1048576; //1024 * 1024

        req.then(
            function resolve(result) {
                var str = result.response;

                var anchor = $('.vcard-hyperlink');
                var windowUrl = window.URL || window.webkitURL;
                if (str.length > maxSizeForBase64 && typeof windowUrl.createObjectURL === 'function') {
                    var blob = new Blob([result.response], { type: 'text/bin' });
                    var url = windowUrl.createObjectURL(blob);
                    anchor.prop('href', url);
                    anchor.prop('download', id+'.bin');
                    anchor.get(0).click();
                    windowUrl.revokeObjectURL(url);
                }
                else {
                    //use base64 encoding when less than set limit or file API is not available
                    anchor.attr({
                        href: 'data:text/plain;base64,'+FormatUtils.utf8toBase64(result.response),
                        download: id+'.bin',
                    });
                    anchor.get(0).click();
                }

            }.bind(this),
            function reject(err) {
                console.log(err);
            }
        );

请注意，我没有使用原始的 XMLHttpRequest，而是使用 ic-ajax ,并且应该与 jQuery.ajax 解决方案非常相似。

另请注意，您应该将 text/bin 和 .bin 替换为与正在下载的文件类型相对应的内容。

FormatUtils.utf8toBase64的实现 can be found here