VUE3（三十二）vue使用xlsx解析excel文件

您所在的位置：网站首页 › xlsx获取外部数据 › VUE3（三十二）vue使用xlsx解析excel文件

VUE3（三十二）vue使用xlsx解析excel文件

2024-01-11 09:10| 来源: 网络整理| 查看: 265

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第32天，点击查看活动详情

工作中发现了一个比较有意思的前端插件xlsx，可以解析excel文件。

之前上传excel文件一般前端只负责文件上传，文件上传成功之后在后端进行解析，后端解析excel的时候使用的是phpexcel，也还是挺方便的

但是如果前端js也是可以解析excel文件的话，那么在前端交互上就比较舒服，我们可以将文件中的内容解析出来之后显示在页面上，可以让操作人在确认数据没有错误之后在点击确定将数据传递至后端。

事先说明一下：我这里使用的是vite构建的vue3+typescript项目

一：安装xlsx

yarn add xlsx or npm install xlsx --save

二：使用xlsx

我这里直接将我测试的代码贴出来

1：html部分（我这里使用ant-design-vue组件）

单击或拖动文件到此区域以上传

2：js部分

引入：

import XLSX from 'xlsx'

调用方法：

/** * @name: 上传文件调用 * @author: camellia * @email: [email protected] * @date: 2021-08-12 */ const handleFileSelected = (e:any) => { // 实例化读取文件对象 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader var reader = new FileReader(); reader.onload = function () { var fileData = reader.result; var wb = XLSX.read(fileData, { type: 'binary', cellDates: true }); // {header:1} 取消标题列. var rowObj:(any) = XLSX.utils.sheet_to_json(wb.Sheets['Sheet1'], { header: 1}); data.exportTableData = rowObj; }; // 已二进制的形式读取文件 reader.readAsBinaryString(e.file.originFileObj); // 导入标识改为true data.exportSign = true; }

我这里使用FileReader来读取文件

FileReader官方文档请参考：

developer.mozilla.org/zh-CN/docs/…

上边只是我简单的一个应用，更多的应用请参考他的官方文档：

github.com/SheetJS/she…

github有的时候打不开，我这里在放两个示例页面：

解析示例：

oss.sheetjs.com/sheetjs/

导出示例：

sheetjs.com/demos/table…

以上两个示例页面都是官方给出的，参照就好。

我在实际应用中发现了一个小问题，也可能是我打包的时候优化的不是很好。使用xlsx的页面在首次加载的时候比较慢。Xlsx文件加载时间相对来讲比较长。我是直接安装在项目中的，也许使用cdn链接引入可能会快点吧，我没有测试。目前还好，在网速快的地方，没有慢到影响用户体验的程度。网速慢，就随缘吧……

以上就是关于xlsx的一个简单的应用。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客：guanchao.site

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”

【本文地址】

VUE3（三十二）vue使用xlsx解析excel文件

VUE3（三十二）vue使用xlsx解析excel文件

今日新闻

推荐新闻