vue中使用js-xlsx导出excel

安装

npm install --save xlsx file-saver

在组件里面引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

第一种 其中#outTable是在el-table上定义的id

exportExcel() {
      var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;}

第二种 通过数组导出excel

var _data = [

        [ "id",    "name", "value" ],

        [    1, "sheetjs",    7262 ],

        [    2, "js-xlsx",    6969 ]

      ];
      const ws= XLSX.utils.aoa_to_sheet(_data);

      /* generate workbook and add the worksheet */
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      /* save to file */
      XLSX.writeFile(wb, 'SheetJS.xlsx');

第三种通过json导出excel

exportExcel() {var wopts = {
        bookType: 'xlsx',
        bookSST: true,
        type: 'binary'
      };
      var workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
      };
      var table = [];
        for(var i=0;i

第三种适合导出选中的数据如果选中的json数据字段都是你需要的可以用下面的方法导出

const workSheet = XLSX.utils.json_to_sheet(this.multipleSelection, {
    header: ['列1', '列2', '列3', '列1', '列2', '列3', '列1', '列2'], skipHeader: true// 跳过上面的标题行  
  });
  const ws = XLSX.utils.aoa_to_sheet(workSheet);
  const wb = XLSX.utils.book_new();
  XLSX
  .utils.book_append_sheet(wb, ws, 'Sheet1');/* save to file */
  XLSX
  .writeFile(wb, 'SheetJS.xlsx');

vue中使用js-xlsx导出excel_第1张图片

 

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