[JavaScript知识库]vue 中 文件下载方式总结

文件下载方式

1. window.location.href 方式

注意：
文件名称为中文时要使用 encodeURI 转码；
下载文件格式为 图片 或 txt 时文件会直接打开；

根据文件名下载：

	window.location.href = "/zuul/dsms/SXMS/留置人员登记.xlsx";

文件名有中文：

	window.location.href = `/zuul/dsms/SXMS/${encodeURI("留置人员登记.xlsx")}`;

根据接口及参数下载（文件名未知）：

	window.location.href = `/zuul/thms/support/medicineinout/exportByPerson?flag=1&id=${id}`;

当参数较多时：

	import Qs from 'qs'
	let params = {
		id:1,
		name:'张三'
	}
	let paramStr = Qs.stringify(params);
	window.location.href = `/zuul/thms/support/medicineinout/exportByPerson?${paramStr}`

2. 后台返回文件流，模拟a 链接下载

 	this.$axios.get(`/zuul/thms/thread/SXMS/${fileName}`, {
      responseType: "blob",
     }).then((response) => {
       //new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
       const blob = new Blob([response.data]); 
       const elink = document.createElement('a');
       elink.download = fileName;
       elink.style.display = 'none';
       elink.href = URL.createObjectURL(blob);
       document.body.appendChild(elink);
       elink.click();
       URL.revokeObjectURL(elink.href); // 释放URL 对象
       document.body.removeChild(elink);
     }).catch((error) => {
       this.$message({
         message: error
       });
     });