是二进制文件(pdf,word,excel,ppt,mp3,...)下载可能使用XHR或fetch?

时间:2015-05-15 14:55:51

标签: javascript html5 browser download xmlhttprequest

可以使用XHR或fetch下载二进制文件(pdf,word,excel,ppt,mp3,...)吗?我已经看到了使用数据URI和base64转换的pdf和图像的一些片段和技巧。我们有更好的机制吗?

我需要下载一个包含以下限制的文件:

  1. 必须使用oauth2令牌对文件下载请求进行身份验证。本质上,这意味着我需要将Authorization标头设置为某个值
  2. 服务器返回分块数据。需要加入块(或者我可以强制服务器发送非分块数据)
  3. 我的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时有一段非工作代码

1 个答案:

答案 0 :(得分:4)

传输编码应该对浏览器中的应用程序透明,不用担心 下面是一个基本的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);