是否可以使用 XHR 或 fetch 下载二进制文件（pdf、word、excel、ppt、mp3、...）？答案

【问题标题】：is binary file(pdf, word, excel, ppt, mp3,...) download possible using XHR or fetch?是否可以使用 XHR 或 fetch 下载二进制文件（pdf、word、excel、ppt、mp3、...）？
【发布时间】：2015-05-15 14:55:51
【问题描述】：

是否可以使用 XHR 或 fetch 下载二进制文件（pdf、word、excel、ppt、mp3、...）？我已经看到了一些使用数据 URI 和 base64 转换的 pdf 和图像的 sn-ps 和技巧。我们有更好的机制吗？

我需要下载一个具有以下限制的文件：

文件下载请求必须使用 oauth2 令牌进行身份验证。本质上，这意味着我需要将 Authorization 标头设置为某个值
服务器返回分块数据。需要加入块（或者我可以强制服务器发送非块数据）

我的 NodeJS 代码

用于获取元数据

var options = {
        hostname : API_HOST ,
        method : 'GET',
        port : 443,
        path : API_PATH + fileId,
        headers : {
            'Authorization' : 'Bearer ' + GOOGLE_ACCESS_TOKEN
        }
    }

    var meta = '';
    var fileRequest = https.request(options, function(response) {
        response.setEncoding('utf8');
        response.on('data', function(chunk) {
            meta += chunk;
        });

        response.on('end', function(error) {
            callback(error, meta);
        })
    });

用于获取实际文件

var file = fs.createWriteStream(GDRIVE_ROOT + '\\' + JSON.parse(meta).originalFilename);
        var options = {
            hostname : url.parse(JSON.parse(meta).downloadUrl).hostname,
            method : 'GET',
            port : 443,
            path : url.parse(JSON.parse(meta).downloadUrl).path,
            headers : {
                'Authorization' : 'Bearer ' + GOOGLE_ACCESS_TOKEN
            }
        }
        var request = https.request(options, function(response) {
            response.pipe(file);
        });
        request.end();

我让它为 NodeJS 工作。有没有办法让我在浏览器中实现文件下载。我在http://jsfiddle.net/LdyruLwv/ 有一段使用 fetch 的非工作代码

【问题讨论】：

对于2.你的意思是传输编码chunked吗？
确实如此。我的意思是传输编码分块。
好的，但是这有什么关系呢？
我将不得不迭代并加入我猜的分块部分，这应该是它重要的原因。同意，只要我知道在收到后续块时事件会被触发，这无关紧要。
感谢您花时间阅读。我已编辑问题以添加我的 NodeJS 代码。如果这有助于澄清我的意图。

标签： javascript html browser download xmlhttprequest

【解决方案1】：

传输编码应该对浏览器中的应用程序是透明的，不用担心。
下面是一个基本的 ajax 文件下载解决方案，它使用 XHR2、blob 和具有下载属性的锚点。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var blobURL = window.URL.createObjectURL(this.response); 
        var anchor = document.createElement('a');
        anchor.download = 'filename.ext';
        anchor.href = blobUrl;
        anchor.click();
    }
}
xhr.open('GET', request_url);
xhr.setRequestHeader('Authorization', 'Bearer ' + GOOGLE_ACCESS_TOKEN);
xhr.responseType = 'blob'; // Get a binary response
xhr.send(jData);

【讨论】：

非常感谢穆萨。非常感谢您的支持。