将element UI 中 el-table 数据原样导出到Excel

一、安装依赖

npm  install  --save  xlsx  file-saver

二、在需要导出成excel的文件里面引入依赖
image.png
三、methods里面写个导出的方法

exportExcel(excelName) {
       //excelName --设置导出的excel名称
       //report-table --对应的要导出的el-table的ref名称
      try {
        const $e = this.$refs['report-table'].$el;
        // 如果表格加了fixed属性,则导出的文件会生产两份一样的数据,所以可在这里判断一下
        let $table = $e.querySelector('.el-table__fixed');
        if (!$table) {
          $table = $e;
        }
        // 为了返回单元格原始字符串,设置{ raw: true }
        const wb = XLSX.utils.table_to_book($table, { raw: true });
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `${excelName}.xlsx`,
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e);
      }
 },

将element UI 中 el-table 数据原样导出到Excel_第1张图片
四、参考文档
https://blog.csdn.net/u010427...
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

你可能感兴趣的:(前端,vue.js,xlsx,excel)