前端Excel生成下载

1、 插件

1、Blob.js 下方copy
2、Export2Excel.js 下方copy

2、引入

import {
    export_json_to_excel } from "@/utils/excel/Export2Excel";

3、使用

filterVal 与 tableHeader 需一一对应，不然导出表格表头与字段对不上。

//设置表头
tableHeader: [
        "兑换时间",
        "手机号",
        "收货人",
        "邮寄地址",
        "兑换物品",
        "兑换数量",
      ],

//请求全部数据
listExport() {
   
      if (this.isQuery) {
   
        config.exchangeDetails(this.search).then((res) => {
   
          console.log("批量导出", res);
          if (res.code === 0) {
   
            this.Excel = res.data.data;
            console.log("哈哈哈", this.Excel);
            this.downExcel(this.Excel);
            this.$message.success("导出成功!");
          } else {
   
            this.$message.error("导出失败!");
            this.gettableData();
          }
        });
      } else {
   
        this.form.pageSize = this.total;
        console.log("重置后",this.form.pageSize);
        config.exchangeDetails(this.form).then((res) => {
   
          console.log("批量导出", res);
          if (res.code === 0) {
   
            this.Excel = res.data.data;
            console.log("哈哈哈", this.Excel);
            this.downExcel(this.Excel);
            this.$message.success("导出成功!");
          } else {
   
            this.$message.error("导出失败!");
            this.gettableData();
          }
        });
      }
    },
    // 导出EXcle
    downExcel() {
   
      console.log("导出数据",this.Excel);
      require.ensure([], () => {
   
        const tHeader = this.tableHeader; //字段对应的中文
        const filterVal = [
          "createTime",
          "recipientPhone",
          "recipientName",
          "detailAddress",
          "productName",
          "orderCount",
        ]; //表格字段
        const list = this.Excel;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "表格名称",true);
      });
    },
    formatJson(filterVal, jsonData) {
   
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

列宽自适应 调用 export_json_to_excel 传入boolean autoWidth

	export function export_json_to_excel(th, jsonData, defaultTitle,autoWidth)

Export2Excel.js

/* eslint-disable */
require('script-loader!file-saver');
// require('script-loader!./Blob');
const {
   
  blob
} = require('./Blob')
require('script-loader!xlsx/dist/xlsx.core.min');

function generateArray(table) {
   
  var out = [];
  var rows = table.querySelectorAll('tr');
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) {
   
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll('td');
    for (var C = 0; C < columns.length; ++C) {
   
      var cell = columns[C];
      var colspan = cell.getAttribute('colspan')