vue 两种文档下载方法的实现(后台传递文件流,后台返回文件下载地址)

后台返回文件流

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);
    });
  });
}

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

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

下面是上面返回结果调用的【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);
		}
	},

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

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

通过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)