vue 前端导入excel文件，并在页面表格展示

在详细介绍前，先展示下效果

第一步，下载xlsx插件

npm install xlsx@0.16.0
在需要的文件中import导入“import xlsx form 'xlsx'” 或 import { read, untils } from 'xlsx'

*第二步：编写导入按钮
*


<el-upload
class="upload-demo"
action=""
drag
ref="upload"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:limit="limitUpload"
:on-exceed="handleExceed"
:on-change="handleChange"
:auto-upload="false"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip"><span style="color:red;font-weight:800;">请上传 .xls / .xlsx 格式文件</span></div>
</el-upload>

  handleChange(file) {const _this = this// _this.tableData = []const fileName = file.name;console.log(fileName);const reader = new FileReader();//提取excel中文件内容reader.readAsArrayBuffer(file.raw);reader.onload = function () {const buffer = reader.result;const bytes = new Uint8Array(buffer);const length = bytes.byteLength;let binary = "";for (let i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}const XLSX = require("xlsx");  //import xlsx from 'xlsx'console.log(XLSX);//转换二进制const wb = XLSX.read(binary, {type: "binary",});const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);console.log(outdata);//这里for循环将excel表格数据转化成json数据outdata.forEach((i) => {let obj = {Project: i.Project,ERS1: i.ERS1,CategoryRel: i.CategoryRel,TestItem: i.TestItem,TestConditionParameter: i.TestConditionParameter,Equipment: i.Equipment,Fixture: i.Fixture,SampleOrientation: i.SampleOrientation,RecoveryTime: i.RecoveryTime,Qty: i.Qty,SamplingFreq: i.SamplingFreq,Duration: i.Duration,ReadPoint: i.ReadPoint,};
//连接后台接口添加到后台数据库_this.$http({method: 'post',url: '/ERS/InsertERS',data: obj}).then((response) => {if (response.data["header"]["code"] == 0) {// _self.resetForm(formName);_this.getData();// _this.$message.success('添加成功');// this.$refs.form.resetFields()// console.log( _self.txt)} else {_this.$message.error(response.data["header"]["message"]);}}).catch((error) => {_this.$message.error(error.toString());});// _this.tableData.push(obj);  //此处是把数据添加到表格中});};},

以下为添加的对应字段表格显示，以此类推

vue 前端导入excel文件，并在页面表格展示相关推荐

vue 前端导入excel文件，并展示出
在详细介绍前,先展示下效果技术介绍 element UI 组件的el-upload和el-table xlsx插件0.16.0版本第一步,下载xlsx插件 npm install xlsx@0.1 ...
vue中导入excel文件
vue中导入excel文件 1.安装插件 npm install -S file-saver xlsxnpm install -D script-loader 2.在utils中创建excel文件夹放 ...
vue前端下载excel文件
// html <el-button type="primary" plain @click="frontDownload">本地下载</el ...
关于使用Java后台导入excel文件，读取数据后，更新数据库，并返回数据给到前端的相关问题总结
在之前的项目中,使用到了Java后台读取excel文件数据的功能点,本想着该功能点已经做过了,这一类的应该都大差不离,不过在刚结束的一个项目中,现实给我深深的上了一课,特此编写此片博客,以作记录,并给 ...
vue实现下载EXCEL模板、导入EXCEL文件
vue实现下载EXCEL模板.导入EXCEL文件在项目中很常见需要先下载模板,根据模板导入下面展示一些下载模板代码片段. 需要有一个下载模板的接口,点击下载触发函数,调用接口,返回下载地址接口 ...
sheetJS+input——实现vue导入excel文件，并判断文件内容是否正确——基础积累
之前写了关于sheetJS导出excel表格的文章,今天来写一下导入功能. 先记录一下关于sheetJS的部分资料内容,方便后续查看. 1.关于sheetJs的部分资料 1.1 sheetJs官网 s ...
前端实现excel文件的导入导出
前端实现excel文件的导入导出导入文件导出文件导入文件 html: <el-dropdown v-waves @command="handleBatchCommand" ...
Vue实现导入Excel功能
1.前端主导实现步骤第一步,点击页面上的导入按钮,读入Excel文件利用插件完成. 第二步,按照后端的要求对数据格式加工,转成他们需要的格式需要自己写逻辑. 第三步,通过后端接口,将数据通过aj ...
vue 前端解析Excel
第一次使用前端的xlsx来解析excel 首先惯例引入xlsx组件依赖 npm install xlsx 前端页面 <input style="position: absolute; ...

vue 前端导入excel文件，并在页面表格展示

vue 前端导入excel文件，并在页面表格展示相关推荐

最新文章

热门文章