vue实现导出excel

vue实现导出excel

思想：从后台接口接受到要导出的文件流，然后前端对文件流做处理。
这里使用了iView里面的Button组件。
不多说，上代码。
Html

<Button class="san-import"  type="primary" icon="ios-paper-outline" @click="exportWord"></Button>

js
只写了导出的函数，按照自己的需求放入vue的methods中即可。

exportWord: function() {
	util.ajax({
		url: util.api.outexcel,	//接口url
		method: 'post',
		timeout: 0,
		responseType: "blob",
		data: {
			mapperType: 1,
			equip: this.dataForm.equipTag,
			preset: this.dataForm.presetTag,
			line: this.dataForm.lineStr
		}
	}).then((res) => {
		console.log(res);
		//以下是重点！！！
		if (typeof window.navigator.msSaveBlob !== 'undefined') {
			//解决IE不能导出
			window.navigator.msSaveBlob(res.data, this.queryForm.date2 + "报告.xlsx");
		} else {		
			const url = window.URL.createObjectURL(new Blob([res.data]));
			const link = document.createElement("a");
			link.style.display = "none";
			link.href = url;
			link.setAttribute("download", this.queryForm.date2 + "报告.xlsx");
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
	}).catch((error) => {
		this.$Message.error('导出失败');
	});
}