vue 前端导出xlsx文件

安装组件：

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")}