vue2.0 前端导出 xlsx 表格 xlsx插件 ，xlsx-style样式修改

**

npm

**
“xlsx”: “https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz”,
“xlsx-style”: “^0.8.13”

解决./cptable 报错

config.externals({ ‘./cptable’: ‘var cptable’ })

获取dom

var tbl = document.getElementById(‘sheetjs’)

设置列的宽度

wb.Sheets.Sheet1[‘!cols’]

合并单元格

wb.Sheets.Sheet1[‘!merges’]

 this.$nextTick(() => {
 var tbl = document.getElementById('sheetjs')
        /* create a workbook */
        const xlsxParam = { raw: true }
        var wb = XLSX.utils.table_to_book(tbl, xlsxParam)
        wb.Sheets.Sheet1['!cols'] = [{ wpx: 80 }, { wpx: 120 }, { wpx: 120 }, { wpx: 120 }, { wpx: 180 }, { wpx: 180 }, { wpx: 180 }]

        // 合并的单元格，s表示开始，e表示结束， 引 c是列的索引，r是行的索
        // wb.Sheets.Sheet1['!merges'] = [
        //   { s: { c: 0, r: 0 }, e: { c: 0, r: 1 }},
        //   { s: { c: 1, r: 0 }, e: { c: 1, r: 1 }},
        //   { s: { c: 2, r: 0 }, e: { c: 2, r: 1 }},
        //   { s: { c: 3, r: 0 }, e: { c: 3, r: 1 }}
        // ]
        // // if (merges.length > 0) {
        // //   if (!wb.Sheets.Sheet1['!merges']) wb.Sheets.Sheet1['!merges'] = []
        // //   merges.forEach(item => {
        // //     wb.Sheets.Sheet1['!merges'].push(XLSX.utils.decode_range(item))
        // //   })
        // // }

        // t:"s",v:"项目"

        const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
        arr.forEach((item) => {
          for (let i = 1; i < 34; i++) {
            const str = (item + i).toString()
            if (!wb.Sheets.Sheet1[str]) {
              wb.Sheets.Sheet1[str] = {
                t: 's', v: ''
              }
            }
            // console.log(str)
            if (wb.Sheets.Sheet1[str]) {
              wb.Sheets.Sheet1[str].s = {
                font: {
                  name: '宋体',
                  sz: 14
                },
                bold: true,
                italic: false,
                underline: false,
                border: {
                  top: { style: 'thin' },
                  bottom: { style: 'thin' },
                  left: { style: 'thin' },
                  right: { style: 'thin' }
                },
                alignment: {
                  // 居中
                  horizontal: 'center',
                  vertical: 'center',
                  indent: 0,
                  wrapText: true
                },
                fill: {
                  bgColor: { indexed: 1 },
                  fgColor: {
                    rgb: i === 1 || i === 2 || i === 27 || i === 28 ? 'A6CCF9' : i === 15 ? 'FFF5C9' : ''
                  }}
              }
            }
          }
        })
        console.log(wb)
        const wbout = XLSXS.write(wb, {
          bookType: 'xlsx',
          bookSST: false,
          type: 'buffer'
        })

        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }), '每日运营日表.xlsx')
          this.isUpDate = false
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e.wbout)
          this.isUpDate = false
        }
      })

官网
https://docs.sheetjs.com/docs/api/utilities/html/