vue前端导出（XLSX）

最新推荐文章于 2025-09-08 14:57:26 发布

原创最新推荐文章于 2025-09-08 14:57:26 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

js开发遇到的问题同时被 2 个专栏收录

5 篇文章

订阅专栏

第三方插件的使用

4 篇文章

订阅专栏

本文详细介绍了如何在Vue.js前端应用中使用JavaScript库实现Excel(XLSX)文件的导出功能，包括引入必要的库、创建数据模型、转换数据格式以及触发下载过程，帮助开发者为用户提供便捷的数据导出体验。

import XLSX from 'xlsx'

exportExcel() {
      let exportTableData = []
      let tmpCon = []
      let propList = []
      this.columnData.forEach(column => {
        tmpCon.push(column.label)
        propList.push(column.prop)
      })
      exportTableData.push(tmpCon)
      this.tableData.forEach( (item, index) => {
        let rowData = []
        propList.forEach( prop => {
          rowData.push(item[prop])
        })
        exportTableData.push(rowData)
      })
      let columns = []
      let ws = XLSX.utils.aoa_to_sheet(exportTableData)
      let wb = XLSX.utils.book_new()
      let wscols = [    // 每列不同宽度px
        { wch: 12 },
        { wch: 26 },
        { wch: 12 },
        { wch: 12 },
        { wch: 14 },
        { wch: 12 },
        { wch: 12 },
        { wch: 15 },
      ];
      ws["!cols"] = wscols;
      let wsrows = [{ hpx: 20 }];  // 设置行高
      for (let i = 0; i <= this.tableData.length; i++) {   // total  列表条数
        wsrows.push({ hpx: 20 });
      }
      ws["!rows"] = wsrows;
      XLSX.utils.book_append_sheet(wb, ws, `${this.title}`) // 工作簿名称
      XLSX.writeFile(wb, `${this.title}.xlsx`) // 保存的文件名
    },