ExcelJS导出Excel

第一步,(node如果是14版本,请装4.3.0的ExcelJS,还有file-saver插件要装,里面有个saveAs方法是导出)

查看插件版本 

npm view exceljs versions 

 第二步下载依赖

npm install exceljs
npm install file-saver

需求场景:要根据用户选择A3导出或者A4导出

参考文章:前端导出excel之使用exceljs + file-saver导出表格到excel - 简书

前端导出excel之exceljs 封装,导出数据表格到excel - 简书

以下代码是根据参考文章改写的代码

新建exportExcel.js文件

/**
 *  exceljs 封装
 *  author:yf
 *  time:20220323
 *  博客:https://www.jianshu.com/p/27e8a5cfc420
 * */
import ExcelJS from 'exceljs'
import FileSaver from 'file-saver'

function isNullFn(val) {
  return val === null || val === void 0 || val === '' || (val).toString() === 'NaN'
}

/**
 *  将chart与index计算,原理是使用ascii计算
 *  @chart:参与计算的字母,这里代表excel的列A ->Z
 *
 * */
function chartCalFn(chart, index) {
  return String.fromCharCode(chart.charCodeAt() + index)
}

// 获取换算后行的位置。 如 2、25等
function getRowFn(tableRef, index) {
  let startRow = parseInt(tableRef.replace(/[A-Z]/g, '')) // 表格开始的行位置
  return startRow + parseInt(index)
}

// 获取换算后列的位置, 如:B、BC等
function getColumnFn(tableRef, index) {
  // tableRef可能为 AA等
  let startCol = tableRef.replace(/[0-9]/g, '')    // 表格开始的列位置

  let before = startCol.substr(0, startCol.length - 1) // 前面的字母
  let after = startCol.substr(startCol.length - 1, 1) // 最后一位字母

  return before + '' + chartCalFn(after, index)
}

/**
 *  获取换算后的单元格位置
 *  @tableRef: 表格左上角位置
 *  @coords: 需要平移的坐标,格式:[需要横向平移的个数,需要纵向平移的个数]
 *  return String 返回平移行列后的单元格位置
 * */
function getCellFn(tableRef, coords) {
  if (!coords || coords.length !== 2) {
    console.error('坐标错误')
    return tableRef
  }
  return getColumnFn(tableRef, coords[0]) + '' + getRowFn(tableRef, coords[1])
}

/**
 *  excel 导出表格
 *  @tableConfigArr: 同exceljs  sheet.addTable参数 参考 https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E8%A1%A8%E6%A0%BC
 *      注意:1.columns中的_width属性是为了这里便于封装使用的,用于设置表格列宽,exceljs 官网没有此属性,别混淆
 *            2._tableBorder?: boolean 可选封装参数,true 则导出的表格有边框 false 则看表格的theme
 *            3._mergeCells?: [Array<string>] 可选封装参数,需要合并的单元格. eg: [['C3:C5']]
 *            4._cellStyle?: [{   // 单元格样式设置
 *              coords:[0,2], // 如表格ref为C3,则这里表示的是C5 [横坐标,纵坐标],可以理解为以表格左上角为原点
 *              style:{} // 同exceljs 单元格样式 参考https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%A0%B7%E5%BC%8F
 *             }]
 *            5._sheetRefName?: string 注意:当customConfig.sheetName 设置为数组的时候,也就是有多个选项卡的时候,不写此参数则,默认加入第一张sheet
 *
 *  @customConfig: {
       *     sheetName: string || Array 表格选项卡名称
       *               当为数组sheetName时,sheetName 单项可为string代表名称,可为对象,结构如下:
       *                                    {"name": "sheet1",
       *                                    "option": { // option同exceljs 工作表 参考:https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E5%B7%A5%E4%BD%9C%E8%A1%A8%E5%B1%9E%E6%80%A7
       *                                      "properties": {"tabColor": {"argb": "FFC0000"}}}
       *                                    }
       *     fileName: string 导出的excel文件名,如:test
       *  }
 * */
  // 参数如下:
  // 参数说明:为了更友好的参考官网,这里封装的结构基本和exceljs官网一致,但某些为了方便调用的配置的参数,都以 "_"开头,如:_width,_cellStyle,_mergeCells,_tableBorder
  // tableConfigArr 结构如下:
  // [
  //   {
  //     "name": "MyTestTable",
  //     "ref": "C3",
  //     "headerRow": false,
  //     "totalsRow": false,
  //     "style": {"theme": "TableStyleLight1"},
  //     "columns": [
  //       {"name": "日期", "_width": 30},
  //       {"name": "姓名", "_width": 30},
  //       {"name": "省份", "_width": 30},
  //     ],
  //     "rows": [
  //       ["2016-05-02", "王小虎", "上海"],
  //       ["2016-05-03", "王小虎", "上海"],
  //     ],
  //     "_tableBorder": true,
  //     "_mergeCells": [
  //       ["C3:C5"],
  //       ["D3:H3"],
  //     ],
  //     "_cellStyle": [ // 单元格样式设置,代表表格左上角平移1列2行后的单元格,如表格ref为C3,则这里表示的是D5 [横坐标,纵坐标],可以理解为以表格左上角为原点,
  //       {
  //         "coords": [0, 2],
  //         "style": {"alignment": {"vertical": "middle", "horizontal": "left"}}
  //       },
  //     ],
  //     "_sheetRefName": "sheet2"
  //   }
  // ],
  // customConfig 结构如下:
  // {
  //     "sheetName": [
  //       {"name": "sheet1", "option": {"properties": {"tabColor": {"argb": "FFC0000"}}}},
  //       "sheet2"
  //     ],
  //     "fileName": "合并表头的表格导出"
  // }
export function $export(tableConfigArr, customConfig) {
  let {sheetName, fileName} = customConfig
  const workbook = new ExcelJS.Workbook();
  workbook.creator = 'admin';
  workbook.lastModifiedBy = 'admin';
  workbook.created = new Date();
  workbook.modified = new Date();
  workbook.lastPrinted = new Date();

  // 创建带有红色标签颜色的工作表
  // const sheet = workbook.addWorksheet(sheetName, {properties: {tabColor: {argb: 'FFC0000'}}});

  // 生成 sheet start ----------
  let sheetname = null
  if (Array.isArray(sheetName)) { // 多个工作表
    sheetname = sheetName[0].name? sheetName[0].name: sheetName[0]
    sheetName.map(item => {
      workbook.addWorksheet(item.name ? item.name : item, item.option || {});
    })

  } else { // 只有一个工作表
    if (typeof sheetName === 'string') {
      sheetname = sheetName
      workbook.addWorksheet(sheetName);
    } else {
      sheetname = sheetName.name
      workbook.addWorksheet(sheetname, sheetName.option || {});
    }
  }
  // 生成 sheet end ----------

  let sheet = null;
  tableConfigArr.map(tableConfig => {
    let {ref: tableRef, _sheetRefName} = tableConfig // 因为tableRef可能为 AE:2 这种组合
    if (_sheetRefName) { // 指定了插入哪个sheet
      // 按 name 提取工作表
      sheet = workbook.getWorksheet(_sheetRefName);
    } else {
      sheet = workbook.getWorksheet(sheetname);
    }

    // table-列宽设置 start -------
    let {columns} = tableConfig
    columns.map((item, index) => {
      if (isNullFn(item._width)) return // 没有设置宽度使用exceljs默认宽
      let currentChart = sheet.getColumn(getColumnFn(tableRef, index))
      currentChart.width = item._width // 设置列宽度
    })
    // table-列宽设置 end -------

    // 单元格合并 start --------
    let {_mergeCells} = tableConfig
    _mergeCells && _mergeCells.length && _mergeCells.map(item => {
      sheet.mergeCells(item);
    })
    // 单元格合并 end --------

    // 单元格样式设置 start ------
    let {_cellStyle} = tableConfig
    _cellStyle && _cellStyle.length && _cellStyle.map(item => {
      let cell = sheet.getCell(getCellFn(tableRef, item.coords))
      item.style && Object.keys(item.style).map(sub => { // 设置单元格样式
        cell[sub] = item.style[sub]
      })
    })
    // 单元格样式设置 end ------

    // 表格设置边框 start -------
    let {_tableBorder} = tableConfig
    if (_tableBorder && _tableBorder== undefined) {
      let {columns, rows, headerRow, totalsRow} = tableConfig
      let rowMaxIndex = rows.length
      headerRow && (rowMaxIndex++); // 有标题行则+1
      totalsRow && (rowMaxIndex++); // 有合计行则+1
      let colMaxIndex = columns.length

      for (let rowIndex = 0; rowIndex < rowMaxIndex; rowIndex++) {
        for (let colIndex = 0; colIndex < colMaxIndex; colIndex++) {
          let cell = sheet.getCell(getCellFn(tableRef, [colIndex, rowIndex]))
          cell.border = {
            top: {style: 'thin'},
            left: {style: 'thin'},
            bottom: {style: 'thin'},
            right: {style: 'thin'}
          }
        }
      }
    }
    // 表格设置边框 end -------
    sheet.addTable(tableConfig)
  })

  // workbook.xlsx.writeFile('test.xlsx') // node端才能使用
  workbook.xlsx.writeBuffer().then(buffer => {
    FileSaver.saveAs(new Blob([buffer], {type: 'application/octet-stream'}), `${fileName || 'excel'}.xlsx`);
  })
}

引入:

  import * as exportExcel from '../../../utilities/exportExcel.js'

传入exportXlsx方法 rowall是表格数据 

 // 开始导出
      exportXlsx(rowall, filename) {
        // 生成columns
        let columns = []
        let tableHeader = ['废物名称', '废物代码', '日期', '本月产生总量(吨)', '本月委外利用处置总量(吨)', '本月待出库总量(吨)']
        tableHeader.map(item => {
          columns.push({
            name: item,
            // _width: 20, // 注意:这里是封装后才能这样写,exceljs table columns 没有width
            _width: this.exportExcelPaper == 'A3' ? '30' : '20', // 注意:这里是封装后才能这样写,exceljs table columns 没有width

          })
        })
        console.log(columns, 'colums')
        if (this.exportExcelPaper == 'A4') {
          columns.map((item, index) => {
            switch (index) {
              case 0:
                item._width = '18'
                break;
              case 2:
                item._width = '18'
                break;
              case 4:
                item._width = '24'
                break;
            }
          })
        }

        // 生成rows
        let rows = []
        rowall.map(item => {
          let arr = []
          tableHeader.map(sub => {
            switch (sub) {
              case '废物名称':
                arr.push(item['Name'])
                break;
              case '废物代码':
                arr.push(item['WarehousingCode'])
                break;
              case '日期':
                arr.push(item['StorageTime'])
                break;
              case '本月产生总量(吨)':
                arr.push(item['StorageWeight'])
                break;
              case '本月委外利用处置总量(吨)':
                arr.push(item['OutboundWeight'])
                break;
              case '本月待出库总量(吨)':
                arr.push(item['RemainingWeight'])
                break;
            }
          })
          rows.push(arr)
        })
        // 表头样式设置 - 生成_cellStyle
        let _cellStyle = []
        tableHeader.map((item, index) => {
          _cellStyle.push({
            coords: [index, 0], // 代表表格第一行第一列 [横坐标,纵坐标]
            style: {
              border: {
                top: {
                  style: 'thin'
                },
                left: {
                  style: 'thin'
                },
                bottom: {
                  style: 'thin'
                },
                right: {
                  style: 'thin'
                }
              },
              alignment: {
                vertical: 'middle',
                horizontal: 'center'
              }
            },
          })
        })
        rows.map((item, index) => {
          item.map((item1, index1) => {
            _cellStyle.push({
              coords: [index1, index + 1], // 代表表格第一行第一列 [横坐标,纵坐标]
              style: {
                border: {
                  top: {
                    style: 'thin'
                  },
                  left: {
                    style: 'thin'
                  },
                  bottom: {
                    style: 'thin'
                  },
                  right: {
                    style: 'thin'
                  }
                },
                alignment: {
                  vertical: 'middle',
                  horizontal: 'center'
                }
              },
            })
          })

        })
        exportExcel.$export([{
          name: 'MyTestTable',
          ref: 'A1',
          headerRow: true,
          totalsRow: false,
          style: {
            theme: 'TableStyleLight1',
          },
          columns: columns,
          rows: rows,
          // exceljs无此参数:参数-针对表格中某个单元格设置样式
          _cellStyle: [
            ..._cellStyle,
            // {
            //   coords: [1, 2], // 代表表格第一行第一列 [横坐标,纵坐标]
            //   style: {
            //     border: {
            //       top: {
            //         style: 'thin'
            //       },
            //       left: {
            //         style: 'thin'
            //       },
            //       bottom: {
            //         style: 'thin'
            //       },
            //       right: {
            //         style: 'thin'
            //       }
            //     },
            //     alignment: {
            //       vertical: 'middle',
            //       horizontal: 'center'
            //     },
            //     fill: {
            //       type: 'pattern',
            //       pattern: 'darkVertical',
            //       fgColor: {
            //         argb: 'FFFF0000'
            //       }
            //     }
            //   },
            // }
          ]
        }], {
          sheetName: 'My Sheet',
          fileName: filename,
        })
      },

如果是要合并单元格,表头是俩行的话,参考下面代码  headerRow要为true才能在a1

新建 exportExcel2.js

/**
 *  exceljs 封装
 *  author:yf
 *  time:20220323
 *  博客:https://www.jianshu.com/p/27e8a5cfc420
 * */
import ExcelJS from 'exceljs'
import FileSaver from 'file-saver'

function isNullFn(val) {
  return val === null || val === void 0 || val === '' || (val).toString() === 'NaN'
}

/**
 *  将chart与index计算,原理是使用ascii计算
 *  @chart:参与计算的字母,这里代表excel的列A ->Z
 *
 * */
function chartCalFn(chart, index) {
  return String.fromCharCode(chart.charCodeAt() + index)
}

// 获取换算后行的位置。 如 2、25等
function getRowFn(tableRef, index) {
  let startRow = parseInt(tableRef.replace(/[A-Z]/g, '')) // 表格开始的行位置
  return startRow + parseInt(index)
}

// 获取换算后列的位置, 如:B、BC等
function getColumnFn(tableRef, index) {
  // tableRef可能为 AA等
  let startCol = tableRef.replace(/[0-9]/g, '') // 表格开始的列位置

  let before = startCol.substr(0, startCol.length - 1) // 前面的字母
  let after = startCol.substr(startCol.length - 1, 1) // 最后一位字母

  return before + '' + chartCalFn(after, index)
}

/**
 *  获取换算后的单元格位置
 *  @tableRef: 表格左上角位置
 *  @coords: 需要平移的坐标,格式:[需要横向平移的个数,需要纵向平移的个数]
 *  return String 返回平移行列后的单元格位置
 * */
function getCellFn(tableRef, coords) {
  if (!coords || coords.length !== 2) {
    console.error('坐标错误')
    return tableRef
  }
  return getColumnFn(tableRef, coords[0]) + '' + getRowFn(tableRef, coords[1])
}

/**
 *  excel 导出表格
 *  @tableConfigArr: 同exceljs  sheet.addTable参数 参考 https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E8%A1%A8%E6%A0%BC
 *      注意:1.columns中的_width属性是为了这里便于封装使用的,用于设置表格列宽,exceljs 官网没有此属性,别混淆
 *            2._tableBorder?: boolean 可选封装参数,true 则导出的表格有边框 false 则看表格的theme
 *            3._mergeCells?: [Array<string>] 可选封装参数,需要合并的单元格. eg: [['C3:C5']]
 *            4._cellStyle?: [{   // 单元格样式设置
 *              coords:[0,2], // 如表格ref为C3,则这里表示的是C5 [横坐标,纵坐标],可以理解为以表格左上角为原点
 *              style:{} // 同exceljs 单元格样式 参考https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E6%A0%B7%E5%BC%8F
 *             }]
 *            5._sheetRefName?: string 注意:当customConfig.sheetName 设置为数组的时候,也就是有多个选项卡的时候,不写此参数则,默认加入第一张sheet
 *
 *  @customConfig: {
 *     sheetName: string || Array 表格选项卡名称
 *               当为数组sheetName时,sheetName 单项可为string代表名称,可为对象,结构如下:
 *                                    {"name": "sheet1",
 *                                    "option": { // option同exceljs 工作表 参考:https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E5%B7%A5%E4%BD%9C%E8%A1%A8%E5%B1%9E%E6%80%A7
 *                                      "properties": {"tabColor": {"argb": "FFC0000"}}}
 *                                    }
 *     fileName: string 导出的excel文件名,如:test
 *  }
 * */
// 参数如下:
// 参数说明:为了更友好的参考官网,这里封装的结构基本和exceljs官网一致,但某些为了方便调用的配置的参数,都以 "_"开头,如:_width,_cellStyle,_mergeCells,_tableBorder
// tableConfigArr 结构如下:
// [
//   {
//     "name": "MyTestTable",
//     "ref": "C3",
//     "headerRow": false,
//     "totalsRow": false,
//     "style": {"theme": "TableStyleLight1"},
//     "columns": [
//       {"name": "日期", "_width": 30},
//       {"name": "姓名", "_width": 30},
//       {"name": "省份", "_width": 30},
//     ],
//     "rows": [
//       ["2016-05-02", "王小虎", "上海"],
//       ["2016-05-03", "王小虎", "上海"],
//     ],
//     "_tableBorder": true,
//     "_mergeCells": [
//       ["C3:C5"],
//       ["D3:H3"],
//     ],
//     "_cellStyle": [ // 单元格样式设置,代表表格左上角平移1列2行后的单元格,如表格ref为C3,则这里表示的是D5 [横坐标,纵坐标],可以理解为以表格左上角为原点,
//       {
//         "coords": [0, 2],
//         "style": {"alignment": {"vertical": "middle", "horizontal": "left"}}
//       },
//     ],
//     "_sheetRefName": "sheet2"
//   }
// ],
// customConfig 结构如下:
// {
//     "sheetName": [
//       {"name": "sheet1", "option": {"properties": {"tabColor": {"argb": "FFC0000"}}}},
//       "sheet2"
//     ],
//     "fileName": "合并表头的表格导出"
// }
export function $export(tableConfigArr, customConfig) {
  let {
    sheetName,
    fileName
  } = customConfig
  const workbook = new ExcelJS.Workbook();
  workbook.creator = 'admin';
  workbook.lastModifiedBy = 'admin';
  workbook.created = new Date();
  workbook.modified = new Date();
  workbook.lastPrinted = new Date();
  console.log(tableConfigArr, 'tableConfigArr')
  // 创建带有红色标签颜色的工作表
  // const sheet = workbook.addWorksheet(sheetName, {properties: {tabColor: {argb: 'FFC0000'}}});

  // 生成 sheet start ----------
  let sheetname = null
  if (Array.isArray(sheetName)) { // 多个工作表
    sheetname = sheetName[0].name ? sheetName[0].name : sheetName[0]
    sheetName.map(item => {
      workbook.addWorksheet(item.name ? item.name : item, item.option || {});
    })

  } else { // 只有一个工作表
    if (typeof sheetName === 'string') {
      sheetname = sheetName
      workbook.addWorksheet(sheetName);
    } else {
      sheetname = sheetName.name
      workbook.addWorksheet(sheetname, sheetName.option || {});
    }
  }
  // 生成 sheet end ----------

  let sheet = null;
  tableConfigArr.map(tableConfig => {

    let {
      ref: tableRef,
      _sheetRefName
    } = tableConfig // 因为tableRef可能为 AE:2 这种组合

    if (_sheetRefName) { // 指定了插入哪个sheet
      // 按 name 提取工作表
      sheet = workbook.getWorksheet(_sheetRefName);
    } else {
      sheet = workbook.getWorksheet(sheetname);
    }

    // table-列宽设置 start -------
    let {
      columns
    } = tableConfig
    columns.map((item, index) => {
      if (isNullFn(item._width)) return // 没有设置宽度使用exceljs默认宽
      let currentChart = sheet.getColumn(getColumnFn(tableRef, index))
      currentChart.width = item._width // 设置列宽度
    })
    // table-列宽设置 end -------
    // 单元格合并 start --------
    let {
      _mergeCells
    } = tableConfig
    _mergeCells && _mergeCells.length && _mergeCells.map(item => {
      sheet.mergeCells(item);
    })
    // 单元格合并 end --------
    // 单元格样式设置 start ------
    let {
      _cellStyle
    } = tableConfig
    console.log(_cellStyle,'_cellStyle')
    _cellStyle && _cellStyle.length && _cellStyle.map(item => {
      console.log(item,'item')
      let cell = sheet.getCell(getCellFn(tableRef, item.coords))
      item.style && Object.keys(item.style).map(sub => { // 设置单元格样式
        cell[sub] = item.style[sub]
      })
    })
    // 单元格样式设置 end ------
    // 表格设置边框 start -------
    let {
      _tableBorder
    } = tableConfig
    if (_tableBorder) {
      let {
        columns,
        rows,
        headerRow,
        totalsRow
      } = tableConfig
      let rowMaxIndex = rows.length
      headerRow && (rowMaxIndex++); // 有标题行则+1
      totalsRow && (rowMaxIndex++); // 有合计行则+1
      let colMaxIndex = columns.length

      for (let rowIndex = 0; rowIndex < rowMaxIndex; rowIndex++) {
        for (let colIndex = 0; colIndex < colMaxIndex; colIndex++) {
          let cell = sheet.getCell(getCellFn(tableRef, [colIndex, rowIndex]))
          cell.border = {
            top: {
              style: 'thin'
            },
            left: {
              style: 'thin'
            },
            bottom: {
              style: 'thin'
            },
            right: {
              style: 'thin'
            }
          }
        }
      }
    }
    // 表格设置边框 end -------
    sheet.addTable(tableConfig)
  })

  // workbook.xlsx.writeFile('test.xlsx') // node端才能使用
  workbook.xlsx.writeBuffer().then(buffer => {
    FileSaver.saveAs(new Blob([buffer], {
      type: 'application/octet-stream'
    }), `${fileName || 'excel'}.xlsx`);
  })
}

引入

  import * as exportExcel from '../../../utilities/exportExcel2.js'

这里新建个 方法处理表格

  // 底部表格
      getTableExportData2() {
        // 表头数据,这里拆成三行,方便演示这里没有放级联数组里,直接写死的
        // 注意:因为要合并,文本要放最后一个待合并单元格,不然合并后显示后为空
        let header1 = [] //这个是空 最后一个index赋值
        let header2 = []
        this.columns.map((item, index) => {
          if (this.fieldHiddenState) { //隐藏
            if (index <= 14) {
              if (index == 5) { //处理合并单元格  我的就是index为5时要处理
                item.children.map((item1, index1) => {
                  header2.push(item1.title)
                  header1.push('')
                })
              } else {
                if (index == 14) { //到了14要把合并单元格上面的第一行赋值到最后一个index
                  header1.push('合并单元格上面的第一行的名字')
                  header2.push(item.title)
                } else {
                  header1.push('')
                  header2.push(item.title)
                }
              }
            }
            //显示字段
          } else {

          }
        })
        // 生成columns - 因为列必须有列名,这里使用的header3,其他的也行,反正后面不会显示,后面会隐藏表头
        let columns = []
        let _cellStyle = []
        header2.map((item,index) => {
          columns.push({
            name: item,
            _width: 20 // 注意:这里是封装后才能这样写,exceljs table columns 没有width
          })
          _cellStyle.push({
            coords: [index, 0], // 代表表格第一行第一列 [横坐标,纵坐标]
            style: {
              border: {
                top: {
                  style: 'thin'
                },
                left: {
                  style: 'thin'
                },
                bottom: {
                  style: 'thin'
                },
                right: {
                  style: 'thin'
                }
              },
              alignment: {
                vertical: 'middle',
                horizontal: 'center'
              }
            },
          })
        })
        console.log(header2,'2',header1,'1')
        // 生成rows
        let rows = []
        // rows.push(header1) // 前面是表头1
        rows.push(header2) // 前面是表头2
        let rowall = this.$refs.table.$refs.table.selection
        console.log(rowall, 'rowall数据')
        rowall.map((item,index) => { // 这里才是表格的数据
          let arr = []
          header2.map(sub => {
            // arr.push(item['Name'])
            //这里自己随便写16行假数据
            switch (sub) {
              case '*****':
                arr.push(item['****'])
                break;
              case '假数据':
                arr.push(item['CreateTime'])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push('')
                break;
              case '':
                arr.push(item[''])
                break;
              case '':
                arr.push(item[''])
                break;

            }
          })
          rows.push(arr)
        })
        //改内容的样式
        rows.map((item, index) => {
          item.map((item1, index1) => {
            _cellStyle.push({
              coords: [index1, index + 1], // 代表表格第一行第一列 [横坐标,纵坐标]
              style: {
                border: {
                  top: {
                    style: 'thin'
                  },
                  left: {
                    style: 'thin'
                  },
                  bottom: {
                    style: 'thin'
                  },
                  right: {
                    style: 'thin'
                  }
                },
                alignment: {
                  vertical: 'middle',
                  horizontal: 'center'
                }
              },
            })
          })

        })


        return {
          columns,
          rows,
          _cellStyle
        }
      },

最后开始导出

  // 开始导出
      exportXlsx(filename) {
        let {
          rows,
          columns,
          _cellStyle
        } = this.getTableExportData2()
        console.log(rows,columns,'rows')
        exportExcel.$export([{
          name: 'MyTestTable',
          ref: 'A1',
          headerRow: true, // 【注意:这里headerRow是false】
          totalsRow: false,
          style: {
            theme: 'TableStyleLight1',
            //            showRowStripes: true,
          },
          columns: columns,
          rows: rows,

          _tableBorder: true, // 表格设置边框
          _mergeCells: [ // 这里是需要合并的表头 - 可以等表格导出后再一个一个看哪些需要合并,这种配置是目前想到的最简单的方式了
            ['A1:A2'],
            ['B1:B2'],
            ['C1:C2'],
            ['D1:D2'],

            ['E1:E2'],
            ['F1:G1'],
            ['H1:H2'],
            ['I1:I2'],

            ['J1:J2'],
            ['K1:K2'],
            ['L1:L2'],
            ['M1:M2'],

            ['N1:N2'],
            ['O1:O2'],
            ['P1:P2'],
            ['Q1:Q2'],
          ],
          _cellStyle:[
            ..._cellStyle,
          ]
          // 表头部分单元格居中
          // _cellStyle: [{
          //     coords: [0, 2], // 代表表格第一行第一列 [横坐标,纵坐标]
          //     style: {
          //       alignment: {
          //         vertical: 'middle',
          //         horizontal: 'left'
          //       }
          //     },
          //   },
          //   {
          //     coords: [1, 2], // 代表表格第一行第一列 [横坐标,纵坐标]
          //     style: {
          //       alignment: {
          //         vertical: 'middle',
          //         horizontal: 'left'
          //       }
          //     },
          //   }
          // ]
        }], {
          sheetName: 'My Sheet',
          fileName: filename
        })
      },

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值