根据前端table导出excel_a-table xlsx-优快云博客

本文链接：https://blog.youkuaiyun.com/cherry_zhang18/article/details/122690772

本文介绍了一种利用npm包xlsx进行表格数据导出的方法。具体步骤包括：首先安装npminstall xlsx，然后使用import * as xlsx from 'xlsx'导入模块，接着为待导出的table设置id为eventAnalysisTable，最后通过提供的JavaScript方法实现Excel文件的导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,安装 npm install xlsx

2，import * as xlsx from 'xlsx'

3，给导出的table一个id为eventAnalysisTable

4，导出方法

methods: {
    // 表格导出
    exportTable() {
      // exportTable(this.queryString).then(res => {
      //   if (res.status === 200) {
      //     if (res.data.type === 'application/json') {
      //       this.$message({ type: 'info', message: '文件不存在' })
      //     } else {
      //       const blob = new Blob([res.data], { type: res.data.type })
      //       const objectUrl = URL.createObjectURL(blob)
      //       const a = document.createElement('a')
      //       const fileName = decodeURI(res.headers['content-disposition'].split(';') 
      //       [1].split('=')[1])
      //       document.body.appendChild(a)
      //       a.setAttribute('style', 'display:none')
      //       a.setAttribute('href', objectUrl)
      //       a.setAttribute('download', fileName)
      //       a.click()
      //     }
      //   }
      // })
      const dom = document.getElementById('eventAnalysisTable')
      if (dom) {
        const sheet = xlsx.utils.table_to_book(dom) // 直接将table转为excel
        const eventSheet = xlsx.write(sheet, { bookType: 'xlsx', type: 'binary' })
        this.saveAs(new Blob([this.s2ab(eventSheet)], { type: 'application/octet-stream' 
       }), '事件分析表格导出.xlsx')
      }
    },
    saveAs(obj, fileName) { // 当然可以自定义简单的下载文件实现方式
      const templateA = document.createElement('a')
      templateA.download = fileName || '下载'
      templateA.href = URL.createObjectURL(obj) // 绑定a标签
      templateA.click() // 模拟点击实现下载
      setTimeout(function () { // 延时释放
        URL.revokeObjectURL(obj) // 用URL.revokeObjectURL()来释放这个object URL
      }, 100)
    },
    s2ab(s) { // 字符串转字符流
      if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf)
        // eslint-disable-next-line no-const-assign
        for (let i = 0; i !== s.length; ++i) {
          view[i] = s.charCodeAt(i) & 0xFF
        }
        return buf
      } else {
        const buf = new ArrayBuffer(s.length)
        // eslint-disable-next-line no-const-assign
        for (let i = 0; i !== s.length; ++i) {
          buf[i] = s.charCodeAt(i) & 0xFF
        }
        return buf
      }
    }
}