安装组件:
npm install xlsx --savenpm install --save xlsx file-saver
html 代码
<el-table :data="tableData" id="outExcel"></el-table>
js 代码
import * as XLSX from 'xlsx';import FileSaver from 'file-saver'/**导出数据*/handleOut() {/** 从表生成工作簿对象 out-table是表格的id */const wb = XLSX.utils.table_to_book(document.querySelector("#outExcel"));/** 获取二进制字符串作为输出 */const wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});try {FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}),//设置导出文件名称"文件名称.xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;}
如果想复用的话可以用下面的封装方法
1、outToExcel.js代码,复制即可使用:
import FileSaver from 'file-saver';import * as XLSX from 'xlsx'export default {// 导出Excel表格exportExcel(name, tableName) {//name表示生成excel的文件名tableName表示表格的idvar sel = XLSX.utils.table_to_book(document.querySelector(tableName))var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)} catch (e) {if (typeof console !== 'undefined') console.log(e, selIn)}return selIn}};
2、main.js里面引入刚刚写好的那个js文件
//全局导出excelimport outToexcel(文件名) from 刚刚写好的那个js文件的路径Vue.prototype.outToExcels(取名随意) = outToexcel(文件名);
3、html 代码
<el-table :data="tableData" id="outExcel"></el-table>
4、methods方法调用
exportExcel(){outToExcels.exportExcel("文件名.xlsx","#outExcel")}