使用element-ui el-table这个组件,
第一步: 安装element-ui的环境
npm i element-ui -S
第二步: 导出表格的依
npm install --save xlsx file-saver
第三步 添加一个类名或id名或ref
<el-table id="table" :data="tdata4" height="405" border style="width: 100%">
//定义一个id或者类名都可以,只要能取到 ,ref这个也是可以的
第四步: 添加一个事件
<button @click="exportExcel">导出数据</button>
第五步:需要使用的页面导入
import FileSaver from "file-saver";
import XLSX from "xlsx";
import jsonp from "jsonp";
import stringUtils from "../utils/stringUtils";
第六步: 导出数据
//导出数据
exportExcel () {
let wb = XLSX.utils.table_to_book(document.querySelector('#table')); // 这里就是表格
let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx'); //table是自己导出文件时的命名,随意
} catch (e)
{
if (typeof console !== 'undefined')
console.log(e, wbout)
}
return wbout
},
ok!