前言

在前端网页中想要下载文件，可以使用a标签的download属性，但是又没办法修改http的其他信息来达到特定的目的。name怎么样使用ajax来下载文件呢，包括pdf，mp3, png等。

下载原理

前端发送一个http请求，服务器接收到请求后返回二进制流，然后浏览器利用Blob对象存储，然后使用js将Blob对象保存为文件。同时这个http请求我们还可以对他进行传参数，加请求头等等，可以实现权限控制。

具体代码

前端代码

/* 通过BLob文件来下载保存文件 */
function downloadFileFromBlob(blob, fileName) {
    // fileName 一定是要带后缀名的，而且要和blob匹配，否则下载文件打不开
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE系列兼容,兼容IE10+，Edge12-18
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
        const downloadElement = document.createElement('a');
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = fileName;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
    }
}

const xhr = new XMLHttpRequest();
xhr.open('GET', '/downloadFile');
xhr.responseType = 'blob';
xhr.onreadystatechange = function(){
   if (xhr.readyState == 4 && xhr.status == 200){
        const disposition = xhr.getResponseHeader('content-disposition');
        const matched = /.*filename=(.*)/.exec(disposition); // 匹配
        const fileName = matched?.[1]?.trim();
        downloadFileFromBlob(xhr.response,decodeURIComponent(escape(matchStr)) );
   }
}
xhr.send();

服务端代码

nodejs服务端代码的响应头要加上两个值，最后就是发送文件流

• Content-Type。标识传输文件的MIME类型
• Content-Disposition。是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。
  他的值是复合的。比如attachment;filename=req_get_download.xlsx，attachment表示附件下载，filename则提供了下载文件时默认名字。

// koa代码
router.get('/download', async (ctx, next) => {
    console.log('req download'); // 打印请求头
    ctx.response.set('Content-Disposition','attachment;filename=req_get_download.xlsx'); // 下载响应+文件名
    ctx.response.set('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); // 这个一定要写对，前端的Blob对象的type值是根据这个来生成的
    ctx.response.body = fs.createReadStream(__dirname + '/views/abcd.xlsx'); 
});