表格导出功能

• 第一版（只能导出本页面的表格，并不能导出分页的表格）

npm install --save xlsx file-saver //安装插件

//在需要的组件引入
import FileSaver from "file-saver";
import XLSX from "xlsx";

exportExcel() {
      // 设置当前日期
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let name = year + "" + month + "" + day;
    
    //.table为表格所在位置的class
      var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx" //  name+'.xlsx'表示导出的excel表格名字
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }

• 第二版

//装三个依赖 
npm install -S file-saver xlsx
npm install -D script-loader

//新建两个文件Blob.js和Export2Execl.js。百度可以下载源码。

//在组件方法中
export2Excel() {
　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　　　　　　const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
　　　　　　　　const list = this.tableData;
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '列表excel');
　　　　　　})
　　　　},
formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        }

//这种方法是传入表格绑定的data，所以即使分页也能导出全部。

• 第三版（针对有多处地方要用到导出功能）

//安装三个依赖
npm install -S file-saver xlsx
npm install -D script-loader

// 新建两个文件，与第二版一样。下载两个文件源码
下载链接：https://pan.baidu.com/s/1fjSFq-XMLKFG2qVhhjSzGA 
提取码：bo09 

//假如项目有很多个导出，每个都写就太麻烦了
//可以提取到一个js文件中
export function export2Excel(columns,list){
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel');
        let tHeader = []
        let filterVal = []
        columns.forEach(item =>{
            tHeader.push(item.title)
            filterVal.push(item.key)
        })
        const data = list.map(v => filterVal.map(j => v[j]))
        export_json_to_excel(tHeader, data, '数据列表');
    })
}

//在需要的页面import引入
import { export2Excel } from '@/common/js/util'

exportData(){
       let info = {from: 0,size: 300}
       getDonateList(info).then(res =>{
           if(res.data.errcode === 0){
               this.exportList = this.formatList(res.data.data.records)
               export2Excel(this.columns1,this.exportList)
           } else if (res.data.errcode === 40190){
               this.$Message.info('数据太多无法导出，请联系客服！')
           }
       })
   }