JavaScript学习之el-table带格式导出excel

el-table带格式导出Excel

参考文章：https://blog.csdn.net/Jackchen9900/article/details/125747215

1.实现效果

前端页面

导出效果

2.el-table部分

划重点：el-table组件一定要加一个id
3.数据可调用接口获取

import OMS from '../utils/exportTools'引入工具方法
downloadExcel()
dom: 'download-excel',这里是el-table的id，用于获取表格的数据
name: '导出为Excel',这里是导出后的文件名
ColumnWdth: [20, 20, 35]这里是导出后表格每列的宽度
4.在src→utils中新建exportTools.js文件
exportTools

import FileSaver from 'file-saver'
// import XLSX from 'xlsx'
import * as XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style-medalsoft'

const OMS = {}

// 导出Excel-单表格Excel  带样式
OMS.downLoadXlsx = ({ dom = 'gx_table', name = '文件', ColumnWdth = [] }) => {
  const table = document.getElementById(dom)
  // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
  if (table.querySelector('.el-table__fixed-right')) { table.removeChild(table.querySelector('.el-table__fixed-right')) }
  if (table.querySelector('.el-table__fixed')) { table.removeChild(table.querySelector('.el-table__fixed')) }

  const et = XLSX.utils.table_to_book(table, { raw: true }) // 此处传入table的DOM节点,raw为true表示单元格为文本格式(未加工)

  const wbs = et.Sheets.Sheet1
  const arrA = Object.keys(wbs)

  arrA.forEach((item, index) => {
    // eslint-disable-next-line eqeqeq
    if (wbs[item].v == '') {
      delete wbs[item]
    }
  })

  // 设置表格宽度
  if (ColumnWdth.length === 0) {
    for (let i = 0; i < 30; i++) {
      wbs['!cols'][i] = { wch: 12.5 }
    }
  } else {
    ColumnWdth.forEach((item, i) => {
      wbs['!cols'][i] = { wch: item }
    })
  }

  // 循环遍历每一个表格，设置样式
  for (const key in wbs) {
    if (key.indexOf('!') === -1) {
      // eslint-disable-next-line eqeqeq
      if (key == 'A1' || key == 'B1' || key == 'C1' || key == 'D1' || key == 'E1' || key == 'F1' || key == 'G1' || key == 'H1' || key == 'I1') {
        // console.log('key', key)
        wbs[key].s = {
          font: {
            sz: 13, // 字体大小
            bold: true, // 加粗
            name: '宋体', // 字体
            color: {
              rgb: '000000' // 十六进制，不带#
            }
          },
          alignment: {
            // 文字居中
            horizontal: 'center',
            vertical: 'center',
            wrapText: false// 文本自动换行
          },
          border: {
            // 设置边框
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          }
        }
      } else {
        wbs[key].s = {
          font: {
            sz: 11, // 字体大小
            bold: false, // 加粗
            name: '宋体', // 字体
            color: {
              rgb: '000000' // 十六进制，不带#
            }
          },
          alignment: {
            // 文字居中
            horizontal: 'center',
            vertical: 'center',
            wrapText: false// 文本自动换行
          },
          border: {
            // 设置边框
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          }
        }
      }
    }
  }
  const arr = [
    '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'
  ]
  const range = wbs['!merges']
  if (range) {
    range.forEach((item) => {
      const startColNumber = Number(item.s.r)
      const endColNumber = Number(item.e.r)
      const startRowNumber = Number(item.s.c)
      const endRowNumber = Number(item.e.c)
      const test = wbs[arr[startRowNumber] + (startColNumber + 1)]
      for (let col = startColNumber; col <= endColNumber; col++) {
        for (let row = startRowNumber; row <= endRowNumber; row++) {
          wbs[arr[row] + (col + 1)] = test
        }
      }
    })
  }

  const etout = XLSXStyle.write(et, {
    bookType: 'xlsx',
    type: 'buffer'
  })

  try {
    FileSaver.saveAs(
      new Blob([etout], { type: 'application/octet-stream' }), `${name}.xlsx`) // 导出的文件名
    // eslint-disable-next-line no-empty
  } catch (e) {
  }
  return etout
}

export default OMS

划重点

安装依赖npm install --save xlsx file-saver
其他依赖根据控制台提示依次安装即可

5.小问题
由于需求要求导出表格第一行表头需要实现加粗效果，所以我在样式设置中加了一重判断

if (key.indexOf('!') === -1) {
      // eslint-disable-next-line eqeqeq
      if (key == 'A1' || key == 'B1' || key == 'C1' || key == 'D1' || key == 'E1' || key == 'F1' || key == 'G1' || key == 'H1' || key == 'I1') {
        // console.log('key', key)
        //设置表头样式
      } else {
        //设置其他样式
      }
    }

具体代码可见exportExcel.js文件

求大佬是否有可优化的方法？