前端导出自定义表头

最新推荐文章于 2024-01-18 15:43:10 发布

web前端进阶者

最新推荐文章于 2024-01-18 15:43:10 发布

阅读量471

点赞数 8

文章标签： javascript 前端

本文链接：https://blog.csdn.net/u014708123/article/details/135083973

版权

核心插件

file-saver
xlsx

核心方法

export function SaveExcel(exportTableJson, fileName) { // 保存
  const exportHtml = TableJsonToDom(exportTableJson)
  const workbook = XLSX.utils.table_to_book(
    exportHtml, {
      raw: true // 有的是日期、小数等格式，直接乱码#。所以这里直接保留原始字符串
  })
  const wbout = XLSX.write(workbook, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  saveAs(
    new Blob([wbout], {
      type: 'application/octet-stream'
    }),
    `${fileName}.xlsx`
  )
}
export function TableJsonToDom(tableJson) { // table字符串转Dom
  var objE = document.createElement('div')
  objE.innerHTML = tableJson
  return objE
}

demo

import { SaveExcel } from '@/components/xls/js/CustomExcel.js'
methods: {
     hanldeExportTable() {
      const tableHeader = `
        <thead>
          <tr>
            <th rowspan="2">序号</th>
            <th rowspan="2">单位名称</th>
            <th rowspan="2">互联网对讲机数量</th>
            <th rowspan="2">消防站对讲机数量</th>
            <th colspan="4">专职队</th>
            <th colspan="4">社区微型站</th>
            <th colspan="4">重点单位</th>
          </tr>
          <tr>
            <th>配备站点</th>
            <th>分布数量</th>
            <th>配备率</th>
            <th>对讲机数量</th>
            <th>配备站点</th>
            <th>分布数量</th>
            <th>配备率</th>
            <th>对讲机数量</th>
            <th>配备站点</th>
            <th>分布数量</th>
            <th>配备率</th>
            <th>对讲机数量</th>
          </tr>
        </thead>
      `
      let tableBody = ''
      this.list.forEach((item, index) => {
        const tr = `
          <tr>
            <td>${index + 1}</td>
            <td>${item.unitName}</td>
            <td>${item.talkNum}</td>
            <td>${item.armyTalkNum}</td>
            <td>${item.fullTeamNum}</td>
            <td>${item.fullTeamInstallNum}</td>
            <td>${item.fullRate}</td>
            <td>${item.fullTeamTalkNum}</td>
            <td>${item.commStationNum}</td>
            <td>${item.commStationInstallNum}</td>
            <td>${item.commRate}</td>
            <td>${item.commStationTalkNum}</td>
            <td>${item.keyStationNum}</td>
            <td>${item.keyStationInstallNum}</td>
            <td>${item.keyRate}</td>
            <td>${item.keyStationTalkNum}</td>
          </tr>
        `
        tableBody = tableBody + tr
      })
      const tableJson = `
        <table>
          ${tableHeader}
          <tbody>
          ${tableBody}
          </tbody>
        </table>
      `
      SaveExcel(tableJson, '单位设备情况导出')
    }
}