以前的文件下载可以直接通过
a标签链接跳转，或者window.open()等都是打开页面方式直接处理。 但这次的vue项目中，因为后台需要通过请求头部信息拿token信息，就导致上面的直接打开页面方式失效，只能通过blob实现流文件的下载。
从网上查了些方法，后面采用了下面这种实现方式。具体每个模块的代码意思还不是很清楚，后续会在补充，此处直接先给出源码。
/** 导出需要携带token，此处采用原生XMLHttpRequest去下载文件流 */
import { getToken } from '@/utils/auth'
export function exportByXML(params){
let baseURL = process.env.BASE_API;
function createObjectURL(object) {
return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
var xhr = new XMLHttpRequest();
var formData = new FormData();
xhr.open('get', baseURL + params.url); //url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）
xhr.setRequestHeader("Authorization", getToken());
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
var blob = this.response;
var filename = params.fileName;
// console.log(this.response)
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob,filename);
} else {
var a = document.createElement('a');
var url = createObjectURL(blob);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
}
};
xhr.send(formData);
}// auth.js 文件内容
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}参考文章：
- 前端处理文件下载(带请求头) ： 采用了原生的
XMLHttpRequest方式和blob方式。——此方法试验有效，目前在用。 - Vue2 导出Excel + 解决乱码问题 —— axios （下载后台传过来的流文件（excel）后乱码问题）：给出了3种解决方案（都是结合
axios请求方式）：有的采用js-file-download方案；有的采用blob方式。——还没有验证，不知道效果如何？？ - axios全攻略 详细给出了axios的配置，此处主要参考下
responseType的配置项。