用Xlsx xlsx-style 导出excel表格,附带合并单元格,文字居中,文字颜色字体大小等样式 (复制即可实现)

使用步骤

1.安装插件

代码如下(生成表格插件):npm install xlsx --save

代码如下(修改表格样式):npm install xlsx-style --save

2.引入

代码如下(示例):

import * 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
      }
    },
}

你可能感兴趣的:(excel)