后台返回文件流

1.因为是文件流下载，所以在取后台数据的时候，要多传递一个【responseType: ‘blob’】这个参数，是为了最后数据返回时response的data为【blob】文件格式（data: Blob {size: 22528, type: “application/vnd.ms-excel”}），否则返回的数据只有文件流的结构体，不包含【blob】。
下面为封装的获取后台文件流的方式

function downloadPost (config){
  return new Promise((resolve,reject) => {
    axios({
        url: config.url,
        method: 'post',
        data: config.data,
        responseType: 'blob'
    }).then(res => {
      resolve(res)
    }).catch(err=>{
      reject(err);
    });
  });
}
1234567891011121314

2.将取回来的response直接返回到应用页，通过取到的response去实现文件流转换的制作。我是封装了一个方法，方便多处调用。如果不封装方法的话，直接将实现方法写在返回结果的地方就可以了
下面是调用后台方法的写法

downloadTemplate({responseType: 'arraybuffer'}).then(res=>{
    // 文件流转换成xls文件
    this.$utils.fileConversion("白名单导入模板.xls",res);
    this.$message({type:'success',message:'模板文件已开始下载!'});
})
12345

下面是上面返回结果调用的【fileConversion】的写法

/**
	 * 字节流转换成文件下载
	 * inputFileName：文件名
	 * data：后台取得数据
	 */
	fileConversion(inputFileName,data){
		let str = data.headers['content-disposition'];
		// 文件名
		let fileName = inputFileName;
		let blob = new Blob([data.data], {
			type:
			"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
		});
		if (window.navigator.msSaveOrOpenBlob) {
			navigator.msSaveBlob(blob);
		} else {
			let elink = document.createElement("a");
			elink.download = fileName;
			elink.style.display = "none";
			elink.href = URL.createObjectURL(blob);
			document.body.appendChild(elink);
			elink.click();
			document.body.removeChild(elink);
		}
	},
12345678910111213141516171819202122232425

以上方法就可以实现后台返回文件流的文档转换了。
需要注意的是，我是通过修改传递的文件名用来控制导出的格式，大家可以参考我的方法实现，如果有更好的方法欢迎评论~~
下面配送控制方式：

if(exportType == 1) {
    fileName = "白名单导出数据.xls"
} else {
    fileName = "白名单导出数据.csv"
}
12345

通过URL下载文件的话，其实后台请求封装与文件流是一样的，封装的话和文件流也是一样的，传递取回来的response和文件名，我就不一一粘代码了，可以参考上面的方式。（在这里小小备注一下：因为我没有亲测url的方式，所以可能会存在小问题，大家如果试了有什么问题，欢迎评论，我会慢慢修改的~~）
奉上封装方法：

/**
	 * 从URL里下载文件
	 * fileName:文件名
	 * data:后台取得的数据
	*/
	// 下载文件
	downloadFile (fileName,data) {
		if (!data) { return }
		let url = window.URL.createObjectURL(new Blob([data]))
		let link = document.createElement('a')
		link.style.display = 'none'
		link.href = url;
		link.setAttribute('download', fileName)
		document.body.appendChild(link)
		link.click()
	},

---

🐞标题：vue 两种文档下载方法的实现（后台传递文件流，后台返回文件下载地址）
👽作者：ruige
🐾地址：https://jjdhhc.com/articles/2020/11/07/1604720690127.html
🙏感恩：谢谢您的打赏与支持!中间图片是我的微信公众号,扫码关注哦!