VUE3根据条件查询导出表格数据

最新推荐文章于 2024-08-27 15:02:38 发布

不会滑翔的小鸟

最新推荐文章于 2024-08-27 15:02:38 发布

阅读量419

点赞数

文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Y159357666/article/details/129293869

版权

该文章演示了如何在项目中通过npm安装xlsx和file-saver库，然后导入并使用它们来实现从HTML表格导出数据到Excel文件的功能。当用户点击‘导出’按钮时，代码会将表格转换为工作簿对象，写入二进制字符串，并通过file-saver库保存为数据.xlsx文件。

摘要由CSDN通过智能技术生成

首先安装依赖

npm install --save xlsx file-saver

然后引入

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

<a-popconfirm title="是否确定导出当前数据" @confirm="leadingOut()" id="factoryName">
  <a style="margin-left: 30px;">导出</a>
</a-popconfirm>
<ele-pro-table id="factoryName" />//id是必须项

// 导出表格  按钮点击后触发事件
const leadingOut = () => {
  // 从表生成工作簿对象 
  var wb = XLSX.utils.table_to_book(document.querySelector('#factoryName'));//#后面是id记得更换成自己的
  // 获取二进制字符串作为输出
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      //设置导出文件名称
      '数据.xlsx'
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
};