提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 系列文章目录
• 前言
• 一、用Xlsx xlsx-style 导出excel表格
• 二、使用步骤
  • 1.安装插件
  • 2.引入
• 总结

前言

刚加入前端开发这个行业，学着发布一篇关于我工作上我用到的知识

一、打开编辑器

二、使用步骤

1.安装插件

代码如下（生成表格插件）：npm install  xlsx –save

代码如下（修改表格样式）：npm install  xlsx-style –save

2.引入

代码如下（示例）：

mport * as XLSX from ‘xlsx’

import XLSXD from ‘xlsx-style’

3.基础代码

data(){
 returen{
    //所需数据格式
     msgList: [
        { name: '张三', age: 16, sex: '男' },
        { name: '礼思', age: 16, sex: '男' },
        { name: '王五', age: 16, sex: '男' },
     ],
  }
}
//数据格式
methods:{
exportHandler() {
      // eslint-disable-next-line prefer-const
      let wb = XLSX.utils.book_new()
      // eslint-disable-next-line prefer-const
      //设置单元格列标题
      let headers = {
        serialNumber: '序号',
        date: '日期',
        periodStatistics: '时段统计',
        timeInterval: '时段',
        hoistingTimes: '吊装次数',
        hoistingTonnage: '吊装吨数',
        labeaverageHoistingTime: '平均每次吊装时间',
        averageHoistingTonnage: '平均吊装吨位',
        maxHoistingTime: '最长吊装时间',
        minHoistingTime: '最短吊装时间',
        maxHoistingTonnage: '最大吊装吨位',
      }
      this.msgList.unshift(headers)
      // eslint-disable-next-line prefer-const
       //插入所需数据(这里的this.msgList就是要导出的数据)
      let contentWs = XLSX.utils.json_to_sheet(this.msgList, {
        header: [
          'serialNumber',
          'date',
          'periodStatistics',
          'timeInterval',
          'hoistingTimes',
          'hoistingTonnage',
          'labeaverageHoistingTime',
          'averageHoistingTonnage',
          'maxHoistingTime',
          'minHoistingTime',
          'maxHoistingTonnage',
        ],
        skipHeader: true,
        origin: 'A1',
      })
      contentWs['!merges'] = []
      //去重方法，因为我所做的项目需要将重复项合并为一行，也就是合并单元格
      const dateListSerialNumber = _.uniq(msgList(o => o.serialNumber))
      dateListSerialNumber.shift()
      dateListSerialNumber.forEach((date, index) => {
        //字体样式
        const font = {
          name: '宋体',
          sz: 12,
          bold: true,
          color: { rgb: '00000000' },
        }
        //设置文字居中
        const alignment = {
          horizontal: 'center',
          vertical: 'center',
        }
        //'A1'到 'An'是你想给单元格的样式区域，可以固定写入,下面是只给固定区域修改样式
        // contentWs['A1'].s = {
        //  font,
        //  alignment,
        //}
        contentWs['A' + (index * 24 + 2)].s = {
          font,
          alignment,
        }
        // 给单元格边框加粗 'thin'为细线 ，'thick'为粗线，因为我这个项目不需要加粗，我就注释了
        // const border = {
        //   top: {
        //     style: 'thin',
        //   },
        //   bottom: {
        //     style: 'thin',
        //   },
        //   left: {
        //     style: 'thin',
        //   },
        //   right: {
        //     style: 'thin',
        //   },
        // }
        //合并单元格，跟上面的单元格样式一样，数据可以固定写
        //s为合并的起始位置，e为合并的结束位置
        //r为行，c为列
        contentWs['!merges'].push({
          s: { r: index * 24 + 1, c: 0 },
          e: { r: (index + 1) * 24, c: 0 },
        })
      })
      //给单元格设置列宽
      contentWs['!cols'] = [
        { wch: 8 },
        { wch: 15 },
        { wch: 20 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
        { wch: 15 },
      ]
        //将配置好的数据插入渲染槽种
      XLSX.utils.book_append_sheet(wb, contentWs, '单表名')
      const tmpDown = new Blob([
        this.s2ab(
          XLSXD.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'binary',
            cellStyles: true,
          }),
        ),
      ])
      const deviceName = '表格1.xlsx'
      this.downExcel(
        tmpDown,
        deviceName ,
      )
    },
    downExcel(obj, fileName) {
      const a_node = document.createElement('a')
      a_node.download = fileName
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(obj, fileName)
      } else {
        a_node.href = URL.createObjectURL(obj)
      }
      a_node.click()
      //
      setTimeout(() => {
        URL.revokeObjectURL(obj)
      }, 2000)
    },
    // 文件流转换
    s2ab(s) {
      if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf)
        for (let i = 0; i != s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xff
        }
        return buf
      } else {
        const buf = new Array(s.length)
        for (let i = 0; i != s.length; ++i) {
          buf[i] = s.charCodeAt(i) & 0xff
        }
        return buf
      }
    },
}