由于业务内容的需要，我们有时候需要将表格中的数据做导出，生成一个excel表格，以下操作主要实现将element中的table数据生成一个excel表格并做下载操作。

效果图如下：

 点击图中导出按钮时，将表格中的数据导出为一个excel文件并下载。

如下

 操作步骤如下：

1.下载相应的依赖 （命令如下）

npm install --save xlsx file-saver

2.下载完成后引入相应的插件

        1.import FileSaver from "file-saver";

        2.import * as XLSX from "xlsx";

3.在相关页面引入代码后定义方法

exportExcel() {     //转换成excel时，使用原始的格式     var xlsxParam = { raw: true };     let fix = document.querySelector(".el-table__fixed");     let wb;     //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复     if (fix) {         wb = XLSX.utils.table_to_book(         document.querySelector("#tableId").removeChild(fix),xlsxParam);         document.querySelector("#tableId").appendChild(fix);     } else {         wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);     }     var 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; },

4.给el-table中定义一个id

步骤基本完成，运行项目后点击导出按钮便可实现表格数据下载导出为excel表。

完整代码如下

                                                                                         导入                         导出                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  import FileSaver from "file-saver";     import * as XLSX from "xlsx";     export default {         data () {             return {                 tableData: [{                     date: '2016-05-02',                     name: '王小虎',                     address: '上海市普陀区金沙江路 1518 弄'                 }, {                     date: '2016-05-04',                     name: '王小虎',                     address: '上海市普陀区金沙江路 1517 弄'                 }, {                     date: '2016-05-01',                     name: '王小虎',                     address: '上海市普陀区金沙江路 1519 弄'                 }, {                     date: '2016-05-03',                     name: '王小虎',                     address: '上海市普陀区金沙江路 1516 弄'                 }],             }         },         methods:{             // 导出             exportExcel() {                 //转换成excel时，使用原始的格式                 var xlsxParam = { raw: true };                 let fix = document.querySelector(".el-table__fixed");                 let wb;                 //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复                 if (fix) {                   wb = XLSX.utils.table_to_book(                   document.querySelector("#tableId").removeChild(fix),xlsxParam                   );                   document.querySelector("#tableId").appendChild(fix);                 } else {                   wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);                 }                 var 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;             },         }     }