vue 导入导出excel

1. 接口导出

async exportxlsx() {
      let params = {
        // 要传入参
        }
      const axiosBlob = axios.create()
      axiosBlob({
        method: 'get',
        url: 'url',
        params: params,
        paramsSerializer: function (params) {
          return QS.stringify(params, {
            arrayFormat: 'repeat'
          })
        },
        responseType: 'blob',
      }).then((res) => {
        if (res.status == 200) {
            const filename = 'xxx报表';
            const fileContent = res.data;
            // 创建 Blob 对象
            const blob = new Blob([fileContent], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" });
            // 创建下载链接
            const downloadUrl = URL.createObjectURL(blob);
            // 创建下载链接的 <a> 元素
            const downloadLink = document.createElement("a");
            downloadLink.href = downloadUrl;
            downloadLink.download = filename;
            // 模拟点击下载链接
            downloadLink.click();
            // 清理创建的 URL 对象
            URL.revokeObjectURL(downloadUrl)
          
        }
      });
    },

2. 纯前端导出 （根据代码片段 读取节点导出 一般为表格形式）

html 片段

<el-table id="out-table" sort width="80%" :data="data"  border stripe  :header-cell-style="{ background: '#DFF1FD', fontWeight: 900 }" style="width: 100%">
          <el-table-column prop="name1" align="center" label="名称1" />
          <el-table-column prop="name2" label="名称2" align="center" />
          <el-table-column prop="allMoney" align="right" label="小计">
            <template slot-scope="scope">
               <p>{{list[scope.$index].allMoney}}</p>
            </template>
</el-table-column>
 </el-table>

js片段

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

 outTab() {
      let fix = document.querySelector('.el-table__fixed');
      let wb;
      if (fix) {
        wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
        document.querySelector("#out-table").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      }
      // / get binary string as output 
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      });

      try {
        FileSaver.saveAs(new Blob([wbout], {
          type: 'application/octet-stream'
        }), 'xxx报表.xlsx');
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout;
    },

3.自定义导出

exportExcel(){
      excelConfig: {
        excelHeader: [], //excel的表头
        excelFilterVal: [], //导出列
        multipleSelection: [], //勾选的数据
        defaultList: [], //默认表数据
        fileName: "xxx", //文件名
      },
      this.excelConfig.defaultList = JSON.parse(
        JSON.stringify('表格数据')
      );
      this.exportExcel(this.excelConfig);
    },
exportExcel(){
   exportExcel(params) {
    let excelHeader = params.excelHeader
    let excelFilterVal = params.excelFilterVal
    if(params.page){
      require.ensure([], () => {
        let formatData = []
        let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) : JSON.parse(JSON.stringify(params.defaultList));
        params.multipleSelection.forEach((item,index)=>{
          // console.log(params.multipleSelection)
          // if(item.sheetData){
            // console.log(item)
            formatData.push({"data":formatJson(excelFilterVal, item.sheetData),"sheetName":item.sheetName})
          // }
        })
        // let formatData = formatJson(excelFilterVal, listArr);
  
        function formatJson(excelFilterVal, listArr) {
          return listArr.map(v => {
            return excelFilterVal.map(j => v[j]);
          })
        }
        // console.log(excelHeader,"excelHeader")
        this.export_table_to_excel(excelHeader, formatData, params.fileName);
      })
    }else{
      require.ensure([], () => {
        let {
          export_json_to_excel
        } = require('@/components/Excel/Export2Excel'); //默认为导出全部列表，也可以单笔导出或勾选多笔批量导出
        let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) :
          JSON.parse(JSON.stringify(params.defaultList));
        let formatData = formatJson(excelFilterVal, listArr);
  
        function formatJson(excelFilterVal, listArr) {
          return listArr.map(v => {
            return excelFilterVal.map(j => v[j]);
          })
        }
        this.export_table_to_excel(excelHeader, formatData, params.fileName);
      })
    }
  }, 
}
export_table_to_excel(id) {
    var theTable = document.getElementById(id);
    console.log('a')
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";
    console.log(data);

    var wb = new Workbook(),
        ws = this.sheet_from_array_of_arrays(data);

    /* add ranges to worksheet */
    // ws['!cols'] = ['apple', 'banan'];
    ws['!merges'] = ranges;

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary'
    });

    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), "test.xlsx")
}
sheet_from_array_of_arrays(data, opts) {
    var ws = {};
    var range = {
        s: {
            c: 10000000,
            r: 10000000
        },
        e: {
            c: 0,
            r: 0
        }
    };
    for (let R = 0; R != data.length; ++R) {
        for (let C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R;
            if (range.s.c > C) range.s.c = C;
            if (range.e.r < R) range.e.r = R;
            if (range.e.c < C) range.e.c = C;
            var cell = {
                v: data[R][C]
            };
            if (cell.v == null) continue;
            var cell_ref = XLSX.utils.encode_cell({
                c: C,
                r: R
            });
            if (typeof cell.v === 'number') cell.t = 'n';
            else if (typeof cell.v === 'boolean') cell.t = 'b';
            else if (cell.v instanceof Date) {
                cell.t = 'n';
                cell.z = XLSX.SSF._table[14];
                cell.v = this.datenum(cell.v);
            } else cell.t = 's';
            ws[cell_ref] = cell;
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
    return ws;
}

// excel 时间格式设置
datenum(v, date1904) {
    if (date1904) v += 1462;
    var epoch = Date.parse(v);
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

根据不同需求实现 （页面需要引入 blob xlsx 组件）