Vue前端表格导出

先安装依赖
npm install xlsx – 生成表格用
npm install file-saver – 导出表格用

// 引用
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
export default {
  data() {
    return {
      // 制作json数据
      jsonData: [
        { name: 'Alice', age: 24, city: 'New York' },
        { name: 'Bob', age: 27, city: 'Los Angeles' }
      ]
    }
  }
  methods: {
  	download() {
      // 创建一个工作簿
      const wb = XLSX.utils.book_new()
      // 准备表格数据
      const ws = XLSX.utils.json_to_sheet(this.jsonData)
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      // 生成Excel文件的二进制字符串（这里使用ArrayBuffer）
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      // 触发浏览器导出下载表格
      saveAs(new Blob([new Uint8Array(wbout)], { type: 'application/octet-stream' }), '表格数据.xlsx')
    }
  }
}