vue前端导出多级表头EXCEL

加油干饭人

已于 2023-12-27 13:37:31 修改

阅读量2.6k

点赞数

文章标签：前端 vue.js excel

于 2023-03-08 17:39:59 首次发布

本文链接：https://blog.csdn.net/after_17/article/details/129407912

版权

1. 创建Export2Excel.js文件

import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx-style'
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;
}

  // 设置导出Excel样式 这里主要是关注单元格宽度
  function setExcelStyle(data) {
    let borderAll = {
      //单元格外侧框线
      top: {
        style: "thin",
      },
      bottom: {
        style: "thin",
      },
      left: {
        style: "thin",
      },
      right: {
        style: "thin",
      },
    }
    // data['!cols'] = []
    for(let key in data) {
      if(data[key].constructor === Object) {
        data[key].s = {
          border: borderAll,  // 边框
          alignment: {
            horizontal: "center", //水平居中对齐
            vertical: "center", // 垂直居中
          },
          font: {
            name: "微软雅黑",
            sz: 9,
          },
          bold: true,
          numFmt: 0
        }
        // data["!cols"].push({ wpx: 180 }); // 单元格宽度
        if (key == 'A1' || key == 'B1' ||key == 'C1' ||key == 'D1' ||key == 'E1'||key == 'F1'||key == 'G1'||key == 'H1'||key == 'I1'||key == 'J1'||key == 'O1'||key == 'P1'||key == 'Q1'||key == 'R1'||key == 'R2'||key == 'S1'||key == 'S2'||key == 'T1'||key == 'T2'||key == 'U1'||key == 'U2'||key == 'V1'||key == 'V2'||key == 'W1'||key == 'W2'){
          data[key].s = {
            border: borderAll,  // 边框
            alignment: {
              horizontal: "center", //水平居中对齐
              vertical: "center", // 垂直居中
            },
            font: {
              name: "微软雅黑",
              sz: 9,
              color: {
                rgb: "ffffff"
              },
            },
            bold: true,
            numFmt: 0,
            fill: {
              fgColor: {
                rgb: "2F75B8"
              }
            },
          }
        }

        if (key != 'F1' && key.indexOf("F") > -1){
          data[key].s = {
            border: borderAll,  // 边框
            alignment: {
              // horizontal: "center", //水平居中对齐
              vertical: "center", // 垂直居中
            },
            font: {
              name: "微软雅黑",
              sz: 9,
              color: {
                rgb: "000000"
              },
            },
            bold: true,
            numFmt: 0,
          }
        }

        if (key == 'K1' || key == 'L1' ||key == 'L2' ||key == 'M1' ||key == 'M2'||key == 'N1'){
          data[key].s = {
            border: borderAll,  // 边框
            alignment: {
              horizontal: "center", //水平居中对齐
              vertical: "center", // 垂直居中
            },
            font: {
              name: "微软雅黑",
              sz: 9,
              color: {
                rgb: "ffffff"
              },
            },
            bold: true,
            numFmt: 0,
            fill: {
              fgColor: {
                rgb: "FF0000"
              }
            },
          }
        }

        if (key != 'N1' && key != 'N2' && key.indexOf("N")>-1 &&  data[key].v<0){
          data[key].s = {
            border: borderAll,  // 边框
            alignment: {
              horizontal: "center", //水平居中对齐
              vertical: "center", // 垂直居中
            },
            font: {
              name: "微软雅黑",
              sz: 9,
              color: {
                rgb: "FF0000"
              },
            },
            bold: true,
            numFmt: 0,
          }
        }

      }
    }
  }

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 * 1.5
        };
      } 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 (j == 4){
          result[j]['wch'] = 9;
        }
        else if (j == 5){
          result[j]['wch'] = 8;
        }
        else if (j == 11 || j == 12){
          result[j]['wch'] = 6;
        }
        else if (j == 17 || j == 20){
          result[j]['wch'] = 3;
        }
        else if (j == 18 || j == 19 || j == 21 || j==22){
          result[j]['wch'] = 7;
        }
        else if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch'];
        }
      }
    }
    ws['!cols'] = result;
    setExcelStyle(ws) // 设置单元格样式

  }

  /* 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}`);
}

2. 修改引入的xlsx-style文件

在cpexcel.js文件807行， var cpt = require(‘./cpt’ + ‘able’);
修改为var cpt = cptable;

3. 在代码中引入使用

import('@/utils/Export2Excel').then((excel) => {
	    // 一级表头
        const multiHeader = [
          [
            'AA'
          ],
        ] 
        // 二级表头
        const tHeader = [
          'A'
        ] 
        // 对应数据属性
        const filterVal = [
          'orgId'
        ] // 数据属性
        listMatterCheck({ page: 1, limit: -1 }, this.listQuery).then((res) => {
          var list = res.data.data
          const merges = [
            'A1:A2',
            'B1:B2',
            'C1:C2',
            'D1:D2',
            'E1:E2',
            'F1:F2',
            'G1:G2',
            'H1:H2',
            'I1:I2',
            'J1:J2',
            'K1:K2',
            'L1:M1',
            'N1:N2',
            'O1:O2',
            'P1:P2',
            'Q1:Q2',
            'R1:S1:T1',
            'U1:V1:W1',
          ] //需要合并的单元格
          const data = list.map((item) => filterVal.map((j) => item[j])) // 转换二维数组
          const filename = '文件名称'
          excel.export_json_to_excel({
            multiHeader: multiHeader, // 一级表头
            header: tHeader, // 二级表头
            data: data, // 数据
            filename: filename, // 导出excel的名称
            merges: merges, // 合并表格的数据
            autoWidth: true,
            bookType: 'xlsx',
          })
          loading.close()
        })
      })