JS下载文件经常使用的体式格局

2023年1月28日 112次阅读 来源: 任重道远

下载附件（image，doc，docx， excel，zip，pdf），应该是现实工作中常常碰到一个题目；这里运用过几种体式格局分享出来仅供参考; 首次写能够存在题目,有题目望指出

​ 重要相识的几个知识点：

先来引见经常使用体式格局： 这里下载.doc文档为例，别的都相似

应用 iframe 或 a 衔接

服务端代码

// nodejs
const http = require('http');
const fs = require('fs');
const path = require('path');
http.createServer(function (req, res) { 
    let filename = encodeURIComponent('微信多开的步骤.doc');
    // 下面两个重要在跨域情况下，须要设置的
    res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
    
    // 设置相应头
    res.setHeader('Content-Type', 'application/zip;charset=UTF-8');
    res.setHeader('Content-Disposition', `attachment; filename=${filename}`);
    let fs.readFile(path.resolve(__dirname, `./微信多开的步骤.doc`), function (err, data) {
      if (err) throw err;
      res.end(data);});
}).listen(3000);

​ Content-Disposition 音讯头指导复兴的内容该以何种情势展现，是以内联的情势（即网页或许页面的一部分），还是以附件的情势下载并保留到当地。

​ 也许流程：
​ 1 下载时浏览器会尝试去找下相应头中 Content-Disposition ；
​ 2 假如不存在，起首尝试去预览体式格局翻开该文件 ，假如能就直接显现不然以附件的情势下载并保留；

​ 注重：指定鄙人载文件名中文情况下，必需先举行编码；

JS

// iframe 
var downloadFileUrl = "http://localhost:3000"
var elemIF = document.createElement("iframe");
elemIF.src = downloadFileUrl;
elemIF.style.display = "none";
document.body.appendChild(elemIF);

// a 
var a = document.createElement('a');
a.href = downloadFileUrl;
a.click();

上述两种体式格局仅仅就是发送一个要求，重要依靠后端的支撑；对不须要准确晓得文件下载的状况，上面体式格局就能够满足下载；

人人能够有疑问，iframe 不是能够经由过程 onload 来捕捉加载的完成状况 ？
先来看看 load 实用哪些对象?

load

​ W3C 对 load 定义

Typeload
Sync / AsyncAsync
BubblesNo
Trusted Targets Window, Document, Element

实用对象：window，Document，Element 那末关于我们下载的文件并在其局限；

假如须要捕捉文件下载的进度以及文件下载完成的状况，须要运用下面的体式格局；

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onprogress = function (event) {
    console.log(Math.round(event.loaded / event.total * 100) + "%");
};
xhr.responseType = 'arraybuffer';
xhr.addEventListener('readystatechange', function (event) {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // 猎取相应头重要猎取附件称号
        var contentDisposition = xhr.getResponseHeader('content-disposition');
        // 猎取范例范例和编码  
        var contentType = xhr.getResponseHeader('content-type');
        // 组织blob对象,详细看头部供应的链接地点
        var blob = new Blob([xhr.response], {
            type: contentType
        });
        var url = window.URL.createObjectURL(blob);
        // 猎取文件夹名
        var regex = /filename=[^;]*/;
        var matchs = contentDisposition.match(regex);
        if (matchs) {
            filename = decodeURIComponent(matchs[0].split("=")[1]);
        } else {
            filename = +Date.now() + ".doc";
        }
        var a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
        // dosomething
    }
})
xhr.send();

上述对照第一种体式格局，经由过程 onprogress 捕捉下载进度（界面经由过程显现进度条来提拔体验）；经由过程 readystatechange 监听下载完后并能够做别的的事变；

注重： 必需指定 responseType 范例,能够是arraybuffer 或 blob 不然会涌现毛病题目 比方 zip,pdf文件下载以后打不开提醒毛病的花样; .doc,.excel文件内容乱码等;

    原文作者：任重道远
    原文地址: https://segmentfault.com/a/1190000017831033
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞