Vue3+xlsx+xlsx-style+element plus实现表格的导出并设置格式

作者：JC2024.01.18 10:57浏览量：13

简介：通过使用Vue3、xlsx、xlsx-style和element plus库，你可以轻松地实现表格的导出并设置格式。这个示例代码将帮助你创建一个导出按钮，当点击该按钮时，会将表格数据导出为Excel文件，并按照指定的格式进行排版。

首先，你需要在你的Vue3项目中安装所需的库。你可以通过以下命令来安装：

  1. npm install xlsx xlsx-style element-plus --save

接下来，在你的Vue组件中引入所需的库：

  1. import { createApp } from 'vue'
  2. import ElementPlus from 'element-plus'
  3. import 'element-plus/lib/theme-chalk/index.css'
  4. import XLSX from 'xlsx'

然后，在mounted()钩子中创建exportData函数：

  1. export default {
  2. name: 'App',
  3. mounted() {
  4. this.exportData();
  5. },
  6. methods: {
  7. exportData() {
  8. // 获取表格数据
  9. const tableData = this.$refs.table.tableData;
  10. // 将数据转换为JSON格式
  11. const data = tableData.map(item => {
  12. return Object.keys(item).reduce((result, key) => {
  13. result[key] = item[key];
  14. return result;
  15. }, {});
  16. });
  17. // 创建工作簿和工作表
  18. const workbook = XLSX.utils.book_new();
  19. const worksheet = XLSX.utils.json_to_sheet(data);
  20. // 将工作表添加到工作簿中
  21. XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  22. // 将工作簿转换为二进制数据
  23. const excelData = XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' });
  24. // 创建一个隐藏的a标签，用于下载excel文件
  25. const a = document.createElement('a');
  26. a.href = excelData;
  27. a.download = 'data.xlsx';
  28. document.body.appendChild(a);
  29. a.click();
  30. document.body.removeChild(a);
  31. }
  32. }
  33. }

以上代码将获取表格数据并将其转换为JSON格式，然后使用xlsx库将其转换为Excel工作簿和工作表。最后，将工作簿转换为二进制数据，并创建一个隐藏的a标签来下载Excel文件。

最热文章