纯前端实现导出excel

项目背景：

vue2

插件：

xlsx；xlsx-style；file-saver

说明：

单独使用 xlsx插件，也可以将网页上的table导出成excel，但是导出的excel，没有样式

结合xlsx-style；file-saver，可以实现带样式的excel文件

具体实现代码：

import * as XLSX from 'xlsx'
import * as XLSXStyle from 'xlsx-style'

import XLSX_SAVE from 'file-saver'

export function exportToExcel(columns,dataSource,filename) {
  const headers = columns
    .filter(col => col.key !== 'operation') // 过滤掉 operation 列
    .map(col => col.title)
  const dataIndexes = columns
    .filter(col => col.key !== 'operation') // 过滤掉 operation 列
    .map(col => col.dataIndex)

  // 重构数据，使其匹配表头
  const data = dataSource.map((row,index) => {
    let newRow = {}
    dataIndexes.forEach((dataIndex, index) => {
      newRow[headers[index]] = row[dataIndex]
    })
    return newRow
  })

  // 将表头和数据合并
  data.unshift(headers.reduce((acc, cur) => ((acc[cur] = cur), acc), {}))

  // 将数据转换为工作表
  const worksheet = XLSX.utils.json_to_sheet(data, { skipHeader: true })

  // 设置整个表格的边框
  const range = XLSX.utils.decode_range(worksheet['!ref'])
  for (let R = range.s.r; R <= range.e.r; R++) {
    for (let C = range.s.c; C <= range.e.c; C++) {
      const cellAddress = XLSX.utils.encode_cell({ r: R, c: C })
      if (!worksheet[cellAddress]) {
        worksheet[cellAddress] = { t: 's', v: '' } // 新建空单元格对象
      }
      if (!worksheet[cellAddress].s) {
        worksheet[cellAddress].s = {} // 新建样式对象
      }
      worksheet[cellAddress].s.border = {
        top: { style: 'medium', color: { rgb: '000000' } },
        bottom: { style: 'medium', color: { rgb: '000000' } },
        left: { style: 'medium', color: { rgb: '000000' } },
        right: { style: 'medium', color: { rgb: '000000' } },
      }
    }
  }

  for(let i=0;i<columns.length;i++){
    const list = dataSource.map(item=>{
      const val = item[columns[i].dataIndex];
      if(val){
        if(columns[i].dataIndex == 'indexnum'){
          return 5;
        }else if(val.toString().charCodeAt(0) > 255){
          return val.toString().length * 2;
        }else{
          return val.toString().length;
        }
      }else{
        return 1;
      }
    })
    const maxLength = Math.max(list);
    const width = maxLength * 1.1;
    if(!worksheet["!cols"]) worksheet["!cols"] = [];
    if(!worksheet["!cols"][i]) worksheet["!cols"][i] = {wch:8};
    worksheet["!cols"][i].wch = width;
  }

  // 创建一个新的工作簿并将工作表添加到工作簿中
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 导出工作簿为 Excel 文件
  // console.log('xlsx-style', XLSXStyle)
  let wbout = XLSXStyle.write(workbook, {
    type: 'binary',
    bookType: 'xlsx',
  });
  XLSX_SAVE.saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    `${filename}.xlsx`
  )
}

 使用时调用：

exportToExcel(columns,dataSource,'demo列表')

避坑：

安装xlsx-style后，在使用时，大概率会报错：

Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

解决方式：

在根目录下的vue.config.js(没有的话自己创建一个) 

加入下面的代码

module.exports = {
	configureWebpack: {
    	externals: {
      		'./cptable': 'var cptable'
    	}
  	}
}

然后重启项目