Vue中js前端导出excel表格（实用）

最新推荐文章于 2024-03-14 17:23:19 发布

i大俊

最新推荐文章于 2024-03-14 17:23:19 发布

阅读量1.3k

点赞数 1

分类专栏：工具 JAVASCRIPT基础文章标签： javascript excel Vue

本文链接：https://blog.csdn.net/hope_it/article/details/102692397

版权

JAVASCRIPT基础同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

工具

10 篇文章 0 订阅

订阅专栏

纯前端导出excel,在业务中是很经常见的。对于一些没有分页要求的表格，基本上可以由前端实现导出。

导出方法

导出步骤：

js获取需要导出的dom
用Blob,将dom转为文件流
用URL.createObjectURL生成url

// 导出excel
function exportExcel() {
  // 获取table的html内容了，里面包括标签的class或id等。
  const dom = document.getElementById('sortTable').innerHTML

  // 这样做是为了让excel表格的样式完整
  const excelHtml = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
  xmlns:x="urn:schemas-microsoft-com:office:excel" 
  xmlns="http://www.w3.org/TR/REC-html40">
  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>学员阶段分析</x:Name>
    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    </head><body><table>${dom}</table></body></html>`

  // 生成Excel
  const excelBlob = new Blob([excelHtml], {
    type: 'application/vnd.ms-excel'
  })
  // 通过a标签下载到本地了，下载前可以利用a标签的download属性命名
  const downloadObj = document.createElement('a')
  // 兼容firefox
  const isFirefox = navigator.userAgent.toUpperCase().indexOf('FIREFOX') !== -1
  if (isFirefox) {
    window.open(downloadObj, '_blank')
    return null
  }
  // 利用URL.createObjectURL()方法为a元素生成blob URL
  downloadObj.href = URL.createObjectURL(excelBlob)
  // 给文件命名
  downloadObj.download = '学员阶段分析.xls'
  downloadObj.click()
}