如何最简单的解决JS导出Excel文件的操作

前言

如果大家做过管理系统的人一定都遇到这个情况。
万恶的甲方总是有各式各样莫名其妙的愿望。
你给他做数据报表,他还好死不死一定要你能导出Excel表格。
而且导出的还是条件内的所有数据???
但是没办法,谁叫别人是甲方爸爸呢?虽然是各式各样奇怪的需求,但是我们还是要尽力满足

结果晚上找了对应的代码,结果令人高兴,网页卡死,恭喜你,重新继续找吧!!!
因此,我又看了各式各样乱七八糟的代码,幸好找到一个简单的代码,因此分享出来。希望能普度众生。

2. 解决步骤

首先,我们的方案并不是非常复杂。大家如果之前已经在其他博客上查询或者都已经知道。采用的方法或多或少,都用上了xlsx.js 这个项目的文件。

我们也并没有例外,也同样使用的是xlsx文件

2.1 找到js-xlsx.js 文件

在开始我们一系列吹牛逼之前,我们首先需要找到这个文件。
现如今做Web的方式主要有两种,一种便是html , 使用 script 标签进行导入 , 另一种便是在 vue 的环境之下 使用 npm 下载,之后使用 import 来进行获取

2.1.1 HTML 导入方式

  1. 第一种的方案便是在 github 官方上下载对应的项目 。 Github 项目链接
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3中,可以使用 `xlsx` 库来封装导出Excel文件的功能。下面是一个简单的示例,展示了如何使用 `xlsx` 库导出Excel文件。 首先,安装 `xlsx` 库: ```bash npm install xlsx ``` 然后,在需要导出Excel文件的组件中,创建一个方法来封装导出功能: ```javascript // 导入xlsx库 import XLSX from 'xlsx'; export default { methods: { exportToExcel() { // 创建一个工作簿对象 let wb = XLSX.utils.book_new(); // 创建一个工作表对象 let ws = XLSX.utils.json_to_sheet(yourDataArray); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作簿转换为Excel文件的二进制数据流 let excelData = XLSX.write(wb, { type: 'array', bookType: 'xlsx' }); // 创建一个Blob对象,并将Excel数据流放入其中 let blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 创建一个下载链接,并设置下载属性 let downloadLink = document.createElement('a'); downloadLink.href = window.URL.createObjectURL(blob); downloadLink.download = 'filename.xlsx'; // 触发点击下载链接 downloadLink.click(); } } } ``` 在上面的代码中,`yourDataArray` 是你要导出的数据数组。你需要将其转换为工作表对象,并添加到工作簿中。然后,将工作簿转换为Excel文件的二进制数据流,最后创建一个下载链接并触发点击,即可下载导出Excel文件。 请注意,上面的示例代码中的 `filename.xlsx` 是导出Excel文件文件名,你可以根据自己的需求修改它。 希望这可以帮助到你!如果你有任何其他问题,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值