Vue 导出表格数据到excel(同复杂表格)

首先需要引入两个插件：

 npm i file-saver xlsx -S

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

Button按钮：

<el-button type="text" @click="exportExcel"><h2>导出</h2></el-button>

method方法：getElementById()括号参数是你的form表单id或者是div的id都可。

exportExcel() {
        try {
          const $e = document.getElementById('report-table')
          const wb = XLSX.utils.table_to_book($e, { raw: false })
          const wbout = XLSX.write(wb, {
            bookType: 'xls',
            bookSST: true,
            type: 'array',
          })
          const title = this.title
          FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            `${title}.xls`
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.error(e)
        }
      },

以上就是纯前端导出，注意只导出当前表格数据不是全部数据。

碰到一个很奇怪问题，银行卡号比较长，导出来后excel显示不对。

如下修改：

raw: true
application/octet-stream;charset=utf-8

两天后又加新需求，需要对导出的execl进行边框处理：代码修改如下

exportExcel() {
        const title = this.title
        let ws = XLSX.utils.table_to_sheet(
          document.getElementById('report-table'),
          { raw: true }
        )
        //创建一个workbook对象
        let wb = XLSX.utils.book_new()
        //把worksheet对象添加进workbook对象，第三个参数是excel中sheet的名字
        XLSX.utils.book_append_sheet(wb, ws, title)
        this.setExlStyle(wb['Sheets'][title]) // 设置列宽 字号等 如果无需多余的样式则省略
        this.addRangeBorder(wb['Sheets'][title]['!merges'], wb['Sheets'][title]) //设置合并行的
        let wb_out = XLSX2.write(wb, {
          bookType: 'xlsx',
          type: 'buffer',
        })

        try {
          FileSaver.saveAs(
            new Blob([wb_out], {
              type: 'application/octet-stream;charset=utf-8',
            }),
            `${title}.xlsx`
          ) // 导出的文件名
        } catch (e) {
          console.log(e, wb_out)
        }
        return wb_out
      },



 setExlStyle(data) {
        let borderAll = {
          //单元格外侧框线
          top: {
            style: 'thin',
          },
          bottom: {
            style: 'thin',
          },
          left: {
            style: 'thin',
          },
          right: {
            style: 'thin',
          },
        }
        data['!cols'] = []
        for (let key in data) {
          console.log(key)
          if (data[key] instanceof Object) {
            data[key].s = {
              border: borderAll,
              alignment: {
                horizontal: 'center', //水平居中对齐
                vertical: 'center',
              },
              // font: {
              //   // 自定义字体颜色
              //   color: { rgb: col },
              //   sz: 11,
              // },
              bold: true,
            }
          }
        }
        // 自定义列宽, 每列不一样
        data['!cols'] = [
          { wpx: 120 },
          { wpx: 200 },
          { wpx: 200 },
          { wpx: 150 },
          { wpx: 100 },
          { wpx: 85 },
          { wpx: 85 },
        ]
        return data
      },
,
      addRangeBorder(range, ws) {
        let cols = [
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'I',
          'J',
          'K',
          'L',
          'M',
          'N',
          'O',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'U',
          'V',
          'W',
          'X',
          'Y',
          'Z',
        ]
        range.forEach((item) => {
          let style = {
            s: {
              border: {
                top: { style: 'thin' },
                left: { style: 'thin' },
                bottom: { style: 'thin' },
                right: { style: 'thin' },
              },
            },
          }
          // 处理合并行
          for (let i = item.s.c; i <= item.e.c; i++) {
            ws[`${cols[i]}${Number(item.e.r) + 1}`] =
              ws[`${cols[i]}${Number(item.e.r) + 1}`] || style
            // 处理合并列
            for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
              ws[cols[i] + k] = ws[cols[k] + item.e.r] || style
            }
          }
        })
        return ws
      },