element ui 导出excel (无后端操作)

一.下载

npm install  xlsx@^0.16.0 --savenpm install  file-saver@^2.0.2 --save

 二.导入

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

三. 定义导出的数据标识

在表格中添加 id 属性 并起个名称  out-table

 四.绑定按钮及方法

 <el-button slot="append" icon="el-icon-menu" @click="getExcel()" />

五.方法导出

getExcel() {//定义导出Excel表格事件var xlsxParam = { raw: true };/* 从表生成工作簿对象 */var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);/* 获取二进制字符串作为输出 */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;}