前言
在前端网页中想要下载文件，可以使用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');
});
