vue实现纯前端导入与解析excel表格文件

您所在的位置：网站首页 › vue导出csv › vue实现纯前端导入与解析excel表格文件

vue实现纯前端导入与解析excel表格文件

2023-03-24 10:34| 来源: 网络整理| 查看: 265

一. 场景

前端导入excel表格，直接前端解析文件，将数据传给后端。

二. 需要的库1. 安装npm install xlsx2. 使用import XLXS from "xlsx"; 三. 代码实现1. html部分 {{ upload_file || "导入" }}

2. JS部分

readExcel(e) { // 读取表格文件 let that = this; const files = e.target.files; if (files.length { try { const data = ev.target.result; const workbook = XLSX.read(data, { type: "binary" }); const wsname = workbook.SheetNames[0]; //取第一张表 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容 console.log(ws); } catch (e) { return false; } }; fileReader.readAsBinaryString(files[0]); }

3. 整体代码

{{ upload_file || "导入" }} import XLSX from "xlsx"; export default { data() { return { upload_file: "", lists: [] }; }, methods: { submit_form() { // 给后端发送请求，更新数据 console.log("假装给后端发了个请求..."); }, readExcel(e) { // 读取表格文件 let that = this; const files = e.target.files; if (files.length { try { const data = ev.target.result; const workbook = XLSX.read(data, { type: "binary" }); const wsname = workbook.SheetNames[0]; //取第一张表 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容 that.lists = []; // 从解析出来的数据中提取相应的数据 ws.forEach(item => { that.lists.push({ username: item["用户名"], phone_number: item["手机号"] }); }); // 给后端发请求 this.submit_form(); } catch (e) { return false; } }; fileReader.readAsBinaryString(files[0]); } } }; 四. 样式

原本的文件上传样式可能会跟页面整体风格不搭，所以需要修改其样式。不过此处并不是直接修改其样式而是通过写一个div来覆盖原有的上传按钮。此处样式与element UI中的primary按钮样式相同。

实现该样式的关键在于.upload_file的opacity和position。

.container { border: none; border-radius: 4px; background-color: #409eff; height: 40px; margin-top: 8px; display: flex; align-items: center; justify-content: center; padding: 0 15px; min-width: 80px; *zoom: 1; } .upload_file { font-size: 20px; opacity: 0; position: absolute; filter: alpha(opacity=0); width: 60px; }五. 最后

前端的日益强大导致很多功能都可以在前端去直接实现，并且可以减少服务器压力。

当然单纯地去实现这样的数据传输，尤其对于重要数据，是很不安全的，因此在前后端数据传输的时候，可以加上加密校验，这个后期会来写的。

六. 参考文章

为了实现该功能参考了如下大佬的文章：

【Vue 笔记】Vue 读取excel数据并生成数组vue前端导入并解析excel表格操作指南css input[type=file] 样式美化，input上传按钮美化

【本文地址】

vue实现纯前端导入与解析excel表格文件

vue实现纯前端导入与解析excel表格文件

今日新闻

推荐新闻