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的实现方法的文章就介绍到这了,更多相关vue js-xlsx导出excel 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！