vue把数据导出为Excel表格(合并单元格，修改样式)

安装所需插件

npm i xlsx
npm i xlsx-style
npm i file-saver

xlsx-style安装后使用会报错

This relative module was not found:  * ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js

需要在vue.config.js添加设置来解决报错

chainWebpack: config => {

        config.externals({ './cptable': 'var cptable' })

}

引入Export2Excel.js，代码如下

/* eslint-disable */

import { saveAs } from 'file-saver'

import 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, fontStyle) {

  var ws = {};

  var range = {

    s: {

      c: 10000000,

      r: 10000000

    },

    e: {

      c: 0,

      r: 0

    }

  };

  let _opts = []

  if (opts) {

    _opts = opts

  }

  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],

        s:styleCall

      };

      //给单个表头添加斜线样式

      if (_opts) {

        if (R == _opts[0] && C == _opts[1]) {

          cell = {

            v: data[R][C],

            s: defaultCellStyle

          }

        }

      }

      //给某一单元格的字体自定义样式

      if (fontStyle) {

        if (R == data.length - 3 && C == 1) {

          cell = {

            v: data[R][C],

            s: fontCellStyle

          }

        }

      }

      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;

}

let fontCellStyle = {

  font: {

    name: '宋体',

    sz: 18,

    color: { rgb: "ff0000" },

    bold: true,

  },

  alignment: {//对齐方式

    horizontal: 'center',//水平居中

    vertical: 'center',//竖直居中

  },

}

let defaultCellStyle = {

  alignment: {

    horizontal: 'center',

    vertical: 'center',

    indent: 0

  },

  border: {

    diagonalDown: true,//斜线方向

    diagonal: {

      color: { rgb: '303133' },

      style: 'thin'

    }//diagonalDown与diagonal必须同时使用

  }

}

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

}

/*自定义表头样式*/

let arr = [

  "A1","B1","C1","D1","E1","F1","G1",

  "H1","I1","J1","K1","L1","M1","N1",

  "O1","P1","Q1","R1","S1","T1",

  "U1","V1","W1","X1","Y1","Z1"

];

let arr1 = [

  "A2","B2","C2","D2","E2","F2","G2",

  "H2","I2","J2","K2","L2","M2","N2",

  "O2","P2","Q2","R2","S2","T2",

  "U2","V2","W2","X2","Y2","Z2"

];

let arr2 = [

  "A3","B3","C3","D3","E3","F3","G3",

  "H3","I3","J3","K3","L3","M3","N3",

  "O3","P3","Q3","R3","S3","T3",

  "U3","V3","W3","X3","Y3","Z3"

];

let style = {

  font: {

    color: { rgb: "000000" },

    bold: true,

  },

  // font: {

  //   name: '宋体',

  //   sz: 18,

  //   color: { rgb: "ff0000" },

  //   bold: true,

  // },

  border: {

    color: {

      auto: 1,

    },

    top: {

      style: 'thin',

    },

    bottom: {

      style: 'thin',

    },

    left: {

      style: 'thin',

    },

    right: {

      style: 'thin',

    },

  },

  alignment: {

    horizontal: "center",

    vertical: "center",

    wrapText: 1,

    indent: 0

  },

  fill: {

    fgColor: {rgb: "DCDFE6"},

  },

};

let styleCall = {

  alignment: {

    horizontal: "center"

  },

}

/*二级表头*/

export function export_json_to_excel({

                                       multiHeader = [],  // 第一行表头

                                       multiHeader2 = [], // 第二行表头

                                       data,

                                       filename, //文件名

                                       merges = [], // 合并

                                       autoWidth = true,

                                       bookType = 'xlsx',

                                       diagonal = [],//斜线

                                       fontStyle = false,

                                     } = {}) {

  /* original data */

  filename = filename || '列表';

  data = [...data];

  /*data.unshift(header);*/

  var ws_name = "SheetJS";

  data.unshift(multiHeader)

  data.unshift(multiHeader2)

  var wb = new Workbook()//加样式，如斜线

  if (diagonal) {

    var ws = sheet_from_array_of_arrays(data, diagonal, fontStyle);

  } else {

    var 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))

    })

  }

  let colWidth=[]

  if (autoWidth) {

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

    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

        };

      }

    }))

  }else{

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

      return {

        'wch': 30

      };

    }))

  }

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

  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 dataInfo = wb.Sheets[wb.SheetNames[0]];

  for (var i = 0; i < multiHeader.length; i++) {

    dataInfo[arr[i]].s = style;

  }

  for (var j = 0; j < multiHeader2.length; j++) {

    dataInfo[arr1[j]].s = style;

  }

  debugger

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

  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`)

}

/*三级表头的*/

export function export_json_to_excel1({

                                       multiHeader = [],  // 第一行表头

                                       multiHeader2 = [], // 第二行表头

                                       header,  // 第三行表头

                                       data,

                                       filename, //文件名

                                       merges = [], // 合并

                                       autoWidth = true,

                                       bookType = 'xlsx'

                                     } = {}) {

  /* original data */

  filename = filename || '列表';

  data = [...data];

  var ws_name = "SheetJS";

  data.unshift(multiHeader)

  data.unshift(multiHeader2)

  data.unshift(header);

  var wb = new Workbook()

  var  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 dataInfo = wb.Sheets[wb.SheetNames[0]];

        //multiHeader表格样式

  for (var i = 0; i < multiHeader.length; i++) {

    dataInfo[arr[i]].s = style;

  }

//multiHeader2表格样式

  for (var j = 0; j < multiHeader2.length; j++) {

    dataInfo[arr1[j]].s = style;

  }

  for (var k = 0; k < header.length; k++) {

    dataInfo[arr2[k]].s = style;

  }

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

  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`)

}

vue组件中使用

<template>

<div @click="handleDownload">导出Excel文件</div>

</template>

 <script>

export default {

methods: {

handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        // 这里要注意 multiHeader  和 filterVal 的数组长度一定要相等，否则会报错
        const multiHeader = ['', '', '测试3', '测试4', '测试5']
        const multiHeader2 = ['测试1', '测试2', '测试', '', '']
        const filterVal = ['cs1', 'cs2', 'cs3', 'cs4', 'cs5']
        const merges = ['A1:A2', 'B1:B2', 'C1:E1'] // 合并单元格的数据，如何合并参考上面图片讲解
        const data = this.formatJson(filterVal, [{'cs1':'1', 'cs2':'2', 'cs3':'3', 'cs4':'4', 'cs5':'5'}])
        const filterName = '测试'
        excel.export_json_to_excel({
          multiHeader,
          multiHeader2,
          data,
          merges,
          autoWidth: true,
          filename: filterName
        })
      })
    },
    // 拼接数据
    formatJson(filterVal, jsonData) {
      console.log(jsonData)
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

}

}
</script>