element组件库Table表格导出Excel表格

table表格导出execl表需要两个依赖(xlsx 和 file-saver)

yarn

yarn add xlsx file-saver

or

npm

npm i -S xlsx file-saver
在相应组件引入安装的两个包

import FileSaver from "file-saver";
import XLSX from "xlsx";

给表格组件添加一个id (导出文件事件需要使用)

绑定一个事件用处触发导出文件方法

在methods里定义个方法

	//定义导出Excel表格事件
		exportExcel() {
			/* 从表生成工作簿对象 */
			var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
			/* 获取二进制字符串作为输出 */
			var wbout = XLSX.write(wb, {
				bookType: "xlsx",
				bookSST: true,
				type: "array",
			});
			try {
				FileSaver.saveAs(
					//Blob 对象表示一个不可变、原始数据的类文件对象。
					//Blob 表示的不一定是JavaScript原生格式的数据。
					//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
					//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
					new Blob([wbout], { type: "application/octet-stream" }),
					//设置导出文件名称
					"sheetjs.xlsx"
				);
			} catch (e) {
				if (typeof console !== "undefined") console.log(e, wbout);
			}
			return wbout;
		},

posted @ 2020-10-07 22:26  乖巧刻苦又努力  阅读(731)  评论(0)    收藏  举报