Vue处理后端返回文件流实现下载

Posted 2022-06-16 龖龖龖

//在项目src目录utils下编写一个download.js文件

export default 
		//下载Excel
	excel(data,fileName) 
		this.download0(data,fileName,"application/vnd.ms-excel");
	,
		//下载docx
	docx(data,fileName) 
		this.download0(data,fileName,"application/msexcel");
	,
		//下载Word
	excel(data,fileName) 
		this.download0(data,fileName,"application/msword");
	,
		//下载Zip
	excel(data,fileName) 
		this.download0(data,fileName,"application/zip");
	,
		//下载html
	excel(data,fileName) 
		this.download0(data,fileName,"application/html");
	,
		//下载Markdown
	excel(data,fileName) 
		this.download0(data,fileName,"application/markdown");
	,
	download0(data,fileName,mineType) 
		//创建blob
		let blob = new Blob([data],type:mineType);
		//创建href超链接，点击下载
		window.URL = window.URL || window.WebkitURL;
		let href = URL.createElement("a");
		downA.href = href;
		downA.download= fileName;
		downA.click();
		//销毁超链接
		window.URL.revokeObjectURL(href);
	

//在main.js文件全局引入

import download from "@/utils/download"
Vue.prototype.$download= download

//请求设置responseType

export function exportType() 
	return request(
		url:'',
		method:'',
		//请求时浏览器将返回数据的文件流转为blob格式
		responseType:'blob'
	)

//项目应用

	handleExport()
		this.$confirm("是否确认下载","系统提示",type:"warning")
		.then(()=>
			return exportType();//接口请求
	).then((response)=>
		this.$download.excel(response,"下载后文件的命名");
	)

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系