VUE+ElementUI+SheetJS解析Excel

先安装XLSX：npm install xlsx

导入：import XLSX from 'xlsx'

这里有两种方式：readAsBinaryString和readAsArrayBuffer

readAsBinaryString方式：

<el-uploadref="upload":action="CommitURL":auto-upload="false":on-change="importf":show-file-list="false":multiple="false"><el-button type="primary">点击上传</el-button></el-upload>

checkFileType(file, fileList) {const _file = file.raw;const fileReader = new FileReader();fileReader.onload = (ev) => {try {const data = ev.target.result;const workbook = XLSX.read(data, {type: 'binary'});for (let sheet in workbook.Sheets) {//循环读取每个文件const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);console.log("读取文件");console.log(sheetArray)}} catch (e) {this.$message.warning('文件类型不正确！');}};fileReader.readAsBinaryString(_file);},

readAsArrayBuffer方式：

importf(file, fileList) {var _this = this;var f = file.raw;var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;// if (!rABS) data = new Uint8Array(data);/* data = new Uint8Array(data);*/var workbook = XLSX.read(data, {type: this.rABS ? 'binary' : 'array'});var first_worksheet = workbook.Sheets[workbook.SheetNames[0]];var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header:1});console.log(jsonArr);};if (this.rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}

VUE+ElementUI+SheetJS解析Excel相关推荐

Handsontable VUE+element-ui +handsontable 实现Excel复制文本到项目表格列表（基于Elemenet+handsontable）
@VUE封装handsontable(仿写Element样式)-重点查看使用方法 #Handsontable VUE+element-ui 实现Excel复制文本到项目表格列表(基于Elemenet) ...
[vue] xlsx库解析excel文件内容
一.安装xlsx cnpm install xlsx 二.在需要使用的地方引入: import * as XLSX from 'xlsx/xlsx.mjs' 三.使用了element ui的文件上传组 ...
vue excel导入mysql详细教程_Vue前端上传EXCEL文件，后端（springBoot+MyBatis+MySQL）解析EXCEL并批量插入/更新数据库...
文章目录 Vue前端后端 controller层 service层:如何解析Excel文件 MyBatis:实现批量插入在mysql中设置唯一索引Unique Index MySQL中的inser ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
SheetJS - XLS sheet_to_json() 方法解析 Excel 时不解析表格标题（表格第一行或N行）
前言官方文档:https://github.com/rockboom/SheetJS-docs-zh-CN 在 Vue 项目中,做 Excel(*.xls) 导入并预览表格功能时, 出现了表格第一行 ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
vue 前端解析Excel
第一次使用前端的xlsx来解析excel 首先惯例引入xlsx组件依赖 npm install xlsx 前端页面 <input style="position: absolute; ...
vue实现纯前端导入与解析excel表格文件，导出Excel
一.安装相关依赖 npm install --save xlsx file-saver 二.使用 import * as XLSX from 'xlsx/xlsx.mjs' const FileSav ...

VUE+ElementUI+SheetJS解析Excel

VUE+ElementUI+SheetJS解析Excel相关推荐

最新文章

热门文章