美文网首页
前端js原生导出excel,显示边框和风格线

前端js原生导出excel,显示边框和风格线

作者: Mcq | 来源:发表于2021-07-22 21:13 被阅读0次
let html = document
  .querySelector('table')
  .outerHTML.replace(/<(\w+) (.+?)>/g, (m, p1) => `<${p1}>`)
  .replace('<table>', '<table border>')
// vnd.ms-excel.numberformat:@; 格式化文本
// xmlns 和 head 中 用于显示网格线
html = `<html xmlns:x="urn:schemas-microsoft-com:office:excel">
  <head>
    <xml>
      <x:ExcelWorkbook>
        <x:ExcelWorksheets>
          <x:ExcelWorksheet>
            <x:WorksheetOptions>
              <x:Print><x:ValidPrinterInfo /></x:Print>
            </x:WorksheetOptions>
          </x:ExcelWorksheet>
        </x:ExcelWorksheets>
      </x:ExcelWorkbook>
    </xml>
  </head>
  <style>
    table{vnd.ms-excel.numberformat:@;}
  </style>
    ${html}
  </html>`

const excelBlob = new Blob([html], { type: 'application/vnd.ms-excel' })
const a = document.createElement('a')
a.href = URL.createObjectURL(excelBlob)
a.download = 'excel.xls'
a.click()
URL.revokeObjectURL(a.href) // 释放资源

相关文章

网友评论

      本文标题:前端js原生导出excel,显示边框和风格线

      本文链接:https://www.haomeiwen.com/subject/jnavnftx.html