excel文件下载处理两种方法

原创于 2022-04-17 13:23:19 发布 · 730 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何在Vue.js项目中使用async/await和blob对象实现数据的异步导出，通过`commonExportData`函数，用户可以将axios请求返回的blob数据转换为可下载的Excel文件，包括了两种方法：直接引用外部js文件和独立处理URL。

excel.js文件

export async function commonExportData(res) {
	//转换成二进制对象
  const type ="application/x-download;charset=UTF-8";
	const blob = new Blob([res],{type:type});
	const downloadElement = document.createElement('a');

	//二进制对象转换成url地址
	const href =window.URL.createObjectURL(blob);
	downloadElement.href = href;
  //获取headers中的filename文件名
	downloadElement.download = 'excel.xlsx';
	//下载
	document.body.appendChild(downloadElement);
	downloadElement.click();
	//下载完成移除元素
	document.body.removeChild(downloadElement);
	//释放掉blob对象
	window.URL.revokeObjectURL(href);
}

方法一引用外部js文件
import { commonExportData } from '@/utils/excel';

//excel模板导出
        async exportPage(){
            let paramPageId = this.pageData.pageId;
方法一://引入excel.js文件的方法
       // axios({
			// 	method: 'get',
			// 	url: this.envUrl +'fsp-lowcode-client/page/exportPage?pageId=' + paramPageId,
			// 	responseType: 'blob', // 设置返回数据的类型为blob
			// })
            // .then((res) => {
            //     console.log(res.code)
            //     commonExportData(res.data);
            //     }).catch((e) => console.log(e));
方法二:
            let url = this.envUrl +'fsp-lowcode-client/page/exportPage?pageId=' + paramPageId;
            let res = await this.exportPageModel(url);
			if (res.data) {
				const content = res.data;
				const blob = new Blob([content]);
				const fileName = `【${this.projectInfo.projectName}】-【${this.pageData.pageName}】数据导入模板.xls`;
				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);
			} else {
				this.$message('文件导出失败，请重试');
			}
        },
        exportPageModel(url){
            return axios({
				method: 'get',
				url: url,
				responseType: 'blob',
			});
        },