vue 纯前端导出excel表格

最新推荐文章于 2024-12-10 23:12:29 发布

原创最新推荐文章于 2024-12-10 23:12:29 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #excel

文章介绍了如何在Vue.js项目中安装和使用xlsx库来实现Excel文件的导出。首先通过npm或yarn安装xlsx库，然后在main.js中全局引入并挂载到Vue.prototype上。接着展示了创建和配置workbook对象的基本步骤，包括构造数据数组、转换为工作表及添加到工作簿，最后调用writeFile方法导出为Excel文件。

1.安装 xlsx 库：使用 `npm` 或 `yarn` 安装 xlsx 库依赖。

npm install xlsx -- save

或

yarn add xslx

2.全局导入 xlsx 库 main.js

import * as XLSX from "xlsx";

Vue.prototype.XLSX = XLSX;

3.导出

  <el-button type="primary" @click="exportExcel()">导出</el-button>


   exportExcel() { 
      // 构造 workbook 对象
      let table = [
        ["姓名","性别","年龄"],["哈哈","男","18"],
      ];
      const ws = this.XLSX.utils.aoa_to_sheet(table);
      const wb = this.XLSX.utils.book_new();
      this.XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      // 导出表格
      this.XLSX.writeFile(wb, "import.xlsx");
    },