Export el-table data in element UI to Excel as-is

Posted Jun 15, 20201 min read

  1. Installation dependencies

    npm install --save xlsx file-saver

Second, introduce dependencies in the files that need to be exported to excel
image.png
Three, write an export method in methods

exportExcel(excelName) {
       //excelName - set the exported excel name
       //report-table - the corresponding ref name of the el-table to be exported
      try {
        const $e = this.$refs['report-table'].$el;
        //If a fixed attribute is added to the table, the exported file will produce two copies of the same data, so you can judge here
        let $table = $e.querySelector('.el-table__fixed');
        if(!$table) {
          $table = $e;
        }
        //To return the original string of cells, set {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);
      }
 },

image.png
4. Reference Documents
https://blog.csdn.net/u010427...
https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js