使用Vue + xlsx + xlsx-style 纯前端导出Excel文件

过程中可能遇到的坑已全部列出

---

首先安装所需的三个依赖：

npm install xlsx --save
npm install xlsx-style --save
npm install file-saver --save

如果需求仅仅是导出普通excel，则安装xlsx 即可，仅可以对列宽等进行简单控制。

如果需要控制excel的样式（颜色、字体、边框、居中等），则还需要安装xlsx-style和file-saver。

xlsx-style顾名思义用来设置excel样式，file-saver用来下载文件（普通excel直接用xlsx就可以下载，使用xlsx-style后必须用file-saver才可以下载）

---

安装xlsx-style的坑：

用npm install xlsx-style --save命令可能会安装失败，所以推荐使用cnpm install xlsx-style --save命令进行安装，安装好后不出意外程序会报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx，解决方法网上搜索即可，如在vue.config.js中添加

configureWebpack: {
    externals:{
        './cptable': 'var cptable'
    },
}

注意添加完需要重启项目

---

准备工作做完就到代码实战了：

import XLSX from 'xlsx'
import XLSXS from 'xlsx-style'
import FileSaver from 'file-saver'

function exportExcel() {
  // 需要导出的数据
  let excelData = [
    ['幼儿园课表', null, null, null], // 标题
    ['序号', '课程名称', '教师名称', '上课地点'], // 表头
    ['1', '体育', '大头老师', '操场']
  ]

  // 导出的excel文件名
  const filename = '幼儿园课程表.xlsx'

  // Excel第一个sheet的名称
  const ws_name = 'Sheet1'
  const wb = XLSX.utils.book_new()
  const ws = XLSX.utils.aoa_to_sheet(excelData)
  XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄


  // 设置标题行单元格合并
  // s即start, e即end, r即row, c即column
  // 合并从--0行0列开始,到0行3列
  ws['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }
  ]

  // 设置单元格宽度
  ws['!cols'] = [{
    wpx: 40
  }, {
    wpx: 100
  }, {
    wpx: 100
  }, {
    wpx: 100
  }]


  /*
    设置单元格其他样式
    这里列举一部分,其他样式大同小异,自行网上搜索
   */

  // 可以遍历全部单元格,进行样式设置
  for (let i in ws) {
    if (i === 'B1') {
      ws[i].s = {
        // 字体
        font: {
          name: '仿宋',
          sz: 14,
          bold: true
        }
      }
    } else if (i === 'B2') {
      ws[i].s = {
        // 居中
        alignment: {
          horizontal: 'center',
          vertical: 'center',
          wrapText: true
        }
      }
    } else if (i === 'B3') {
      ws[i].s = {
        // 单元格边框
        border: {
            top: {
              style: 'thin'
            },
            bottom: {
              style: 'thin'
            },
            left: {
              style: 'thin'
            },
            right: {
              style: 'thin'
            }
        }
      }
    }
  }

  // 导出Excel, 注意这里用到的是XLSXS对象
  let wbout = XLSXS.write(wb, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  })
  FileSaver.saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    filename
  )
}

/**
 * 工具方法
 */
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
}