【javascript】ajax请求下载文件

使用javascript blob 下载文件

模拟浏览器下载文件（不与server端交互）

   纯前端的模拟一个下载文件动作

 const downloadJsonFile = () => {
   var jStr = { hello: 'World' }
   var blob = new Blob([JSON.stringify(jStr, null, 2)], {type: 'application/json'})

   const link = document.createElement('a');
   const url = window.URL.createObjectURL(blob);
   link.href = url;
   link.download = `g.json`
   link.click();
   link.remove();
 }

   Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

   Blob构造函数的参数可以是DomString,ArrayBuffer,Blob, ArrayBufferView对象。

   上面构造函数传递的就是DomString，就是字符串。但是我们请求服务器的获取到的二进制流，可以是blob类型，也可以是arraybuffer，一般我们会在请求的时候带上 responseType参数，可以设置为’blob’ 或者 ‘arraybuffer’。

浏览器下载文件（与server端交互，ajax请求返回二进制流。）

   服务端代码用的是egg.js，controller代码长这样：

 // 前提：附件test.pdf放在项目根目录下
 async downloadFile() {
   const { app, ctx } = this;
   const filePath = app.baseDir + '/test.pdf';
   const fileSize = fs.statSync(filePath).size;
   ctx.attachment(filePath);
   // 最好指定这个content-type，如果服务端没有指定，并且前端处理blob也没有指定文件后缀，那么默认是txt文件
   ctx.set('Content-type', 'application/pdf'); 
   const fileName = 'test.pdf';
   ctx.set('Content-Length', fileSize);
   ctx.set('Content-Disposition', `attachment; filename=${fileName}`);
   ctx.body = fs.createReadStream(filePath);
 }

   前端发请求用的是axios，代码：

  const downloadEvent = async () => {
    let res = await axios.get(`${SERVER_HOST}/downloadFile`, {
      withCredentials: true,
      // responseType: 'blob',  key code
      responseType: 'arraybuffer', // blob 都是可行的, key code
      headers:{ 
        'Access-Control-Allow-Origin':'*',
      }
    })
    if (res) {
      const blob = new Blob([res.data])
      // const zip = new Blob([data], { type: data.type });
      // IE兼容性
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(
          blob,
          `test.pdf`
        );
      } else {
        const link = document.createElement('a');
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download="test.pdf";
        link.click();
        link.remove()
      }
    }
  }