前言:
此刻咱们对“js解析excel里面图片”大致比较注意,朋友们都需要了解一些“js解析excel里面图片”的相关文章。那么小编同时在网络上汇集了一些对于“js解析excel里面图片””的相关内容,希望同学们能喜欢,你们快快来了解一下吧!问题描述工作中一般都是后端去解析excel数据,前端使用上传组件去将excel组件丢给后端,后端使用一些插件去解析excel(比如hutool工具类)不过有些情况下,前端也需要去做一些excel的解析,比如产品经理说,在上传excel文件之前,要做一个excel的图表化预览审核查看啥的,没问题的话,再丢给后端去解析
本文讲述一下前端使用xlsx插件去解析excel内容,代码复制粘贴即可使用
效果图假设我有一个excel,里面有一些这样的数据,如下图:
2. 经过解析读取我们看一下得到的数据,如下图:
代码思路
首先安装对应插件,笔者使用的版本号是:0.14.1
cnpm i xlsx@0.14.1 --save
思路使用web API中的FileReader构造函数去异步读取文件转成二进制流文件使用xlsx的read方法去读取对应excel流文件中对应sheet里的数据
FileReader官方文档:
xlsx插件包官方:
代码CV使用之
<template> <el-upload action="#" :auto-upload="false" :on-change="onChange" :limit="1" :show-file-list="false" accept=".xls,.xlsx" > <el-button type="primary">上传excel</el-button> </el-upload></template><script>const xlsx = require("xlsx");export default { methods: { async onChange(file) { /** * 1. 使用原生api去读取好的文件 * */ // console.log("原始上传的文件", file); // 读取文件不是立马能够读取到的,所以是异步的,使用Promise let dataBinary = await new Promise((resolve) => { // Web API构造函数FileReader,可实例化对象,去调用其身上方法,去读取解析文件信息 let reader = new FileReader(); // // console.log("实例化对象有各种方法", reader); reader.readAsBinaryString(file.raw); // 读取raw的File文件 reader.onload = (ev) => { // console.log("文件解析流程进度事件", ev); resolve(ev.target.result); // 将解析好的结果扔出去,以供使用 }; }); // console.log("读取出的流文件", dataBinary); /** * 2. 使用xlsx插件去解析已经读取好的二进制excel流文件 * */ let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true }); // excel中有很多的sheet,这里取了第一个sheet:workBook.SheetNames[0] let firstWorkSheet = workBook.Sheets[workBook.SheetNames[0]]; // 分为第一行的数据,和第一行下方的数据 const header = this.getHeaderRow(firstWorkSheet); console.log("读取的excel表头数据(第一行)", header); const data = xlsx.utils.sheet_to_json(firstWorkSheet); console.log("读取所有excel数据", data); }, getHeaderRow(sheet) { const headers = []; // 定义数组,用于存放解析好的数据 const range = xlsx.utils.decode_range(sheet["!ref"]); // 读取sheet的单元格数据 let C; const R = range.s.r; /* start in the first row */ for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ const cell = sheet[xlsx.utils.encode_cell({ c: C, r: R })]; /* find the cell in the first row */ let hdr = "UNKNOWN " + C; // <-- replace with your desired default if (cell && cell.t) hdr = xlsx.utils.format_cell(cell); headers.push(hdr); } return headers; // 经过上方一波操作遍历,得到最终的第一行头数据 }, },};</script>总结
好记性不如烂笔头 ,记个笔记~吧
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #js解析excel里面图片