vue纯前端导出表格, 可设置表格样式

原创已于 2022-02-11 18:16:20 修改 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #vue.js #javascript

于 2022-01-28 10:52:23 首次发布

本文介绍如何在Vue项目中实现纯前端表格数据导出，并允许用户自定义表格样式，包括设置字体、颜色、边框等，利用javascript处理数据，提供更好的用户体验。

// 导出Excel方法（表格id，不加扩展名的文件名，sheet名）
export function exportExcelMethod (tableId, fileName, sheetName) {
  tableToExcel(tableId, fileName, sheetName)
}
const tableToExcel = (function () {
  const uri = 'data:application/vnd.ms-excel;base64,'
  // 设置导出表格的单元格默认高度/宽度/边框样式/字体颜色/背景颜色/居中，
  // 网页显示表格宽度建议1240，tr/td视情况而定
  // 在style中添加自定义样式
  const template = `
  <html xmlns:x="urn:schemas-microsoft-com:office:excel">
    <head>
      <xml>
        <x:ExcelWorkbook>
          <x:ExcelWorksheets>
            <x:ExcelWorksheet>
              <x:Name>{worksheet}</x:Name>
              <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>
            </x:ExcelWorksheet>
          </x:ExcelWorksheets>
        </x:ExcelWorkbook>
      </xml>
      <meta charset="UTF-8">
      <style type="text/css">
         // table td { border: 1px solid #666; width:100px; text-align: center;color: #000000;}
         // th { border: 1px solid #666; width:100px; text-align: center; color: #000000;}
         // .arrow { height: 16px; font-size: 12px; text-align: center; color: red; display: inline-block; border-bottom: 1px solid #333; padding: 0 8px; margin: 0 5px; position: relative; }
         // .arrow:after { content: ""; display: block; width: 7px; height: 7px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); position: absolute; bottom: -4px; right: 0; }
       </style>
    </head>
    <body>
      <table>{table}</table>
    </body>
  </html>`
  const base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
  const format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p] }) }
  return function (table, filename, sheetname) {
    if (!table.nodeType) table = document.getElementById(table)
    const ctx = { worksheet: sheetname || 'Worksheet', table: table.innerHTML }
    const aTag = document.createElement('a')
    aTag.href = uri + base64(format(template, ctx))
    aTag.download = filename
    aTag.click()
  }
})()