vue中前端导出excel表，使用Export2Excel导出多级表头的表格

安装：

 npm install --save xlsx file-saver

配置：

 

/* eslint-disable */

import { saveAs } from 'file-saver'

import XLSX from 'xlsx'

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');

      var rowspan = cell.getAttribute('rowspan');

      var cellValue = cell.innerText;

      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges

      ranges.forEach(function (range) {

        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {

          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);

        }

      });

      //Handle Row Span

      if (rowspan || colspan) {

        rowspan = rowspan || 1;

        colspan = colspan || 1;

        ranges.push({

          s: {

            r: R,

            c: outRow.length

          },

          e: {

            r: R + rowspan - 1,

            c: outRow.length + colspan - 1

          }

        });

      };

      //Handle Value

      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan

      if (colspan)

        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);

    }

    out.push(outRow);

  }

  return [out, ranges];

};

function 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);

}

function sheet_from_array_of_arrays(data, opts) {

  var ws = {};

  var range = {

    s: {

      c: 10000000,

      r: 10000000

    },

    e: {

      c: 0,

      r: 0

    }

  };

  for (var R = 0; R != data.length; ++R) {

    for (var 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 = 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;

}

function Workbook() {

  if (!(this instanceof Workbook)) return new Workbook();

  this.SheetNames = [];

  this.Sheets = {};

}

function s2ab(s) {

  var buf = new ArrayBuffer(s.length);

  var view = new Uint8Array(buf);

  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

  return buf;

}

export function export_table_to_excel(id) {

  var theTable = document.getElementById(id);

  var oo = generateArray(theTable);

  var ranges = oo[1];

  /* original data */

  var data = oo[0];

  var ws_name = "SheetJS";

  var wb = new Workbook(),

    ws = 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")

}

export function export_json_to_excel({

  multiHeader = [],

  header,

  data,

  filename,

  merges = [],

  autoWidth = true,

  bookType = 'xlsx'

} = {}) {

  /* original data */

  filename = filename || 'excel-list'

  data = [...data]

  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {

    data.unshift(multiHeader[i])

  }

  var ws_name = "SheetJS";

  var wb = new Workbook(),

    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {

    if (!ws['!merges']) ws['!merges'] = [];

    merges.forEach(item => {

      ws['!merges'].push(XLSX.utils.decode_range(item))

    })

  }

  if (autoWidth) {

    /*设置worksheet每列的最大宽度*/

    const colWidth = data.map(row => row.map(val => {

      /*先判断是否为null/undefined*/

      if (val == null) {

        return {

          'wch': 10

        };

      }

      /*再判断是否为中文*/

      else if (val.toString().charCodeAt(0) > 255) {

        return {

          'wch': val.toString().length * 2

        };

      } else {

        return {

          'wch': val.toString().length

        };

      }

    }))

    /*以第一行为初始值*/

    let result = colWidth[0];

    for (let i = 1; i < colWidth.length; i++) {

      for (let j = 0; j < colWidth[i].length; j++) {

        if (result[j]['wch'] < colWidth[i][j]['wch']) {

          result[j]['wch'] = colWidth[i][j]['wch'];

        }

      }

    }

    ws['!cols'] = result;

  }

  /* add worksheet to workbook */

  wb.SheetNames.push(ws_name);

  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {

    bookType: bookType,

    bookSST: false,

    type: 'binary'

  });

  saveAs(new Blob([s2ab(wbout)], {

    type: "application/octet-stream"

  }), `${filename}.${bookType}`);

}

页面代码：

handleDownload() {

 

       var formData =this.listQuery

      formData.limit=9999

      this.downloadLoading = true;

      import("@/vendor/Export2Excel").then((excel) => {

        this.$ajax

          .post("/api/back/Platform.ashx?par=GridList", formData)

          .then((res) => {

            console.log(res);

            const tHeader = [

              "序号",

              "辖段网格责任区域名称",

              "辖段桩号",

              "长度(KM)",

              "责任部门",

              "段长",

              "路长",

              "辖段网格责任区域长",

              "联系方式",

              "高速名称",

              "添加时间",

            ];

            const filterVal = [

              "id",

              "region_name",

              "stake_number",

              "length",

              "department_id_name",

              "paragraph_name",

              "road_name",

              "grid_id_name",

              "grid_id_phone",

              "high_speed_name",

              "add_time",

            ];

            const list = res.data.rows;

            const data = this.formatJson(filterVal, list);

            var lengtH = ["网格区域管理"];

            for (var i = 1; i < tHeader.length; i++) {

              lengtH.push("");

            }

            const multiHeader = [lengtH];

            var na = [

              "A",

              "B",

              "C",

              "D",

              "E",

              "F",

              "G",

              "H",

              "I",

              "J",

              "K",

              "L",

              "M",

              "N",

              "O",

              "P",

              "Q",

              "R",

              "S",

              "T",

              "U",

              "V",

              "W",

              "X",

              "Y",

              "Z",

            ];

            let xNa = "";

            if (tHeader.length > 26) {

              xNa = "A" + na[tHeader.length - 27] + "1";

            } else {

              xNa = na[tHeader.length - 1] + "1";

            }

            console.log(xNa);

            // 进行所有表头的单元格合并

            const merges = ["A1:" + String(xNa)];

            excel.export_json_to_excel({

              multiHeader,

              header: tHeader,

              data,

              filename: "网格区域管理",

              merges,

              autoWidth: true,

              bookType: "xlsx",

            });

            this.downloadLoading = false;

            this.ExcelDialog = false;

          });

      });

    },

    formatJson(filterVal, jsonData) {

      return jsonData.map((v) =>

        filterVal.map((j) => {

          if (j.indexOf(".") == 1) {

            switch (j) {

              case "is_shop":

                return v[j] ? "是" : "否";

                break;

              default:

                return v[j];

            }

          } else {

            try {

              const arr = j.split(".");

              let res = v;

              for (const i in arr) {

                res = res[arr[i]];

              }

              return res;

            } catch (err) {

              return "";

            }

          }

        })

      );

    },

  可参考：

https://www.liyangzone.com/2020/02/27/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8js-xlsx%E6%8F%92%E4%BB%B6%E5%AF%BC%E5%87%BA%E5%A4%9A%E7%BA%A7%E8%A1%A8%E5%A4%B4excel/