vue 本地导出elementUi表格示例

本地导出表格
这个功能在中后台界面中比较常见，也是新手不易理解和操作的功能。
示例中每一步的功能在注释中写清楚了。不清楚的可以留言。
该功能中使用到插件 XLSX,FileSaver。copy示例前务必在项目中安装如上两个插件。
xlsx:用来操作表格转化的工具
FileSaver：用来保存表格文件的工具。

/* generate workbook object from table */
 var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
 let fix = document.querySelector('.el-table__fixed');
 let wb;
 if (fix) {
     //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
     wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix), xlsxParam);
     document.querySelector('#out-table').appendChild(fix);
 } else {
     wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam);
 }
 /* get binary string as output */
 var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
 try {
     FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx');
 } catch (e) {
     if (typeof console !== 'undefined') console.log(e, wbout);
 }
 return wbout;

通过上栗，可以转化成导出其他表格的方法。
插件的具体使用方法，这里不做阐述。有兴趣可以到github上找说明文档阅读。
学习是件快乐的事，不要生拌樱桃。