element-ui table 导出Excel 封装 VUE 版本
话不多说直接上代码
第一步安装依赖:
npm install --save xlsx file-saver
然后在项目目录建立一个 工具类
然后添加 js 文件
代码如下:
// 引入Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
/**
*
* @param {String} Element //表格元素ID
* @param {String} bookType //输出文件类型
* @param {String} type //输入类型
* @param {String} fileName //文件名称
* @returns
*/
/**
* 说明:
* 1.Blob 对象表示一个不可变、原始数据的类文件对象。
* 2.Blob 表示的不一定是JavaScript原生格式的数据。
* 3.File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
* 4.返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
*
* 用法:
* 1.Element 表格元素ID
* 2.bookType 输出文件类型,默认 xlsx
* 3.type 输入类型,默认 array
* 4.fileName 文件名称 默认 ParkingMonthTransaction
*/
// 导出数据
export function xlExport(Element,bookType,type, fileName) {
/* 从表生成工作簿对象 */
if(!Element){
console.error("请添加元素ID");
return;
}
//导出Excel并解决数字列科学计数法问题
let xlsxParam = { raw: true };
let wb = XLSX.utils.table_to_book(document.querySelector(Element),xlsxParam)
/* 获取二进制字符串作为输出 */
let wbout = XLSX.write(wb, {
bookType: bookType || 'xlsx',
bookSST: true,
type: type || 'array'
})
try {
FileSaver.saveAs(
new Blob([wbout], { type: 'application/octet-stream' }),
//设置导出文件名称
fileName && bookType? `${fileName}.${bookType}` : `表格.xlsx`
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
使用方式:
标题html
<button @click="exportExcel">导出</button>
给table添加id
<el-table id="out-table" :data="tableData" >
这是代码块
</el-table>
javascript
//导入
import { xlExport } from "@/utils/export";
methods:{
//定义导出Excel表格事件
exportExcel() {
xlExport(
"#out-table",
"xlsx",
"array",
this.merchant ? `${this.merchant}` : "Excel名称"
);
},
}
后面的参数可以没有(可以默认) 但 dom ID 必须要有