精华内容
下载资源
问答
  • vue导入Excel数据到表格
    2022-03-17 17:03:29

    引用1:
    推荐这个,因为这个作者写的demo部署到了线上可以直接打开看效果。

    https://segmentfault.com/a/1190000018993619
    

    引用2:

    https://blog.csdn.net/weixin_40180205/article/details/106747500
    

    引用3:

    https://blog.csdn.net/weixin_41346436/article/details/106278868
    

    自己写的很早之前了,忘了用的什么了,有空会把自己写的导入表格代码放到这的,哈哈哈

    更多相关内容
  • vue导入excel

    2021-12-15 16:48:02
    vue导入excel

    1 解析excel的公共方法

    //解析文件内容
    export const fileAnalysis = (e) => {
    	return new Promise((resolve, reject) => {
    		this.fileTemp = e.target.files[0];
    		if(this.fileTemp){
    			if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
    				|| (this.fileTemp.type == 'application/vnd.ms-excel') || (this.fileTemp.type == '')){
    				let obj = this.fileTemp;
    				let _this = this;
    				//let inputDOM = this.$refs.inputer;
    				// 通过DOM取文件数据
    				this.file = event.currentTarget.files[0];
    				let rABS = false; //是否将文件读取为二进制字符串
    				let f = this.file;
    				let reader = new FileReader();
    				//if (!FileReader.prototype.readAsBinaryString) {
    				FileReader.prototype.readAsBinaryString = function(f) {
    					let binary = "";
    					let rABS = false; //是否将文件读取为二进制字符串
    					let pt = this;
    					let wb; //读取完成的数据
    					let outdata;
    					let reader = new FileReader();
    					reader.onload = function(e) {
    						let bytes = new Uint8Array(reader.result);
    						let length = bytes.byteLength;
    						for (let i = 0; i < length; i++) {
    							binary += String.fromCharCode(bytes[i]);
    						}
    						//此处引入,用于解析excel
    						let XLSX = require("xlsx");
    						if (rABS) {
    							wb = XLSX.read(btoa(fixdata(binary)), {
    								//手动转化
    								type: "base64"
    							});
    						} else {
    							wb = XLSX.read(binary, {
    								type: "binary",
    								cellDates: true,
    							});
    						}
    						outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    						//outdata就是读取的数据(不包含标题行即表头,表头会作为对象的下标)
    						//此处可对数据进行处理
    						resolve(outdata);
    					};
    					reader.readAsArrayBuffer(f);
    				};
    				if (rABS) {
    					reader.readAsArrayBuffer(f);
    				} else {
    					reader.readAsBinaryString(f);
    				}
    			} else {
    				Vue.prototype.$message({
    					type:'warning',
    					message:'附件格式错误,请删除后重新上传!'
    				});
    			}
    		} else {
    			Vue.prototype.$message({
    				type: 'warning',
    			});
    		}
    	});
    }

    2 引用方法

    //选中文件
        async selectedFile(e) {
          await fileAnalysis(e).then((res) => {
          	console.log(res)
            let dataNum = 0;
            let dataList = this.tabData.dataDetail;
            this.tabData.dataDetail = [];
            res.map((v) => {
    					console.log(v)
            });
          });
        },

    3 说明

            打印的res是一个List<Map<String, Object>>集合, excel中一行数据为一个Map,Map的Key值就是excel的标题,多行数据组成一个List集合,案需求处理即可

    展开全文
  • Vue导入Excel

    2020-12-14 15:44:37
    导入Excel 定义 html元素(安装依赖 npm install xlsx --save) <input type="file" style="display:none" ref="file" @change="getFileData" /> <!--定义一个按钮 触发事件为 chooseFile--> <...

    导入Excel

    1. 定义 html元素(安装依赖 npm install xlsx --save)

      <input
             type="file"
             style="display:none"
             ref="file"
             @change="getFileData"
      />    
      <!--定义一个按钮 触发事件为 chooseFile-->
      <el-button type="primary" @click=“chooseFile”>导入</el-button>
      
      <!-- 记得导入xlsx-->
      import XLSX from "xlsx";
      
    2. 定义方法

       //选择文件
      chooseFile() {
          this.$refs.file.dispatchEvent(new MouseEvent("click"));
      },
      //获取解析后的数据
      getFileData() {
          let _this = this;
          let params = [];
          const inputFile = this.$refs.file.files[0];
          if (inputFile) {
              if (
                  inputFile.name.indexOf(".xlsx") == -1 &&
                  inputFile.name.indexOf(".xls") == -1
              ) {
                  this.$message.error("模板文件类型不正确!", 3);
                  return;
              }
              const reader = new FileReader();
              reader.readAsBinaryString(inputFile);
              reader.onload = function(e) {
                  var workbook = XLSX.read(e.target.result, { type: "binary" });
                  for (let sheet in workbook.Sheets) {
                      if (workbook.Sheets.hasOwnProperty(sheet)) {
                          params = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
                          console.log("参数是神马?");
                          console.log(params);
                          break;
                      }
                  }
                  _this.$refs.file.value = null;
                  _this.batchImport(_this.parseData())
              };
          }
      },
      // parseData方法功能:将excel中数据解析为一个数组
      // batchImport()  括号中的数据就是格式化好的数据list 方法中传给后台即可
      parseData() {
          let _this = this;
          params.shift();
          const data = [];
          params.forEach(item => {
              const obj = {};
              obj.itemName = _this.checkEmpty(item["测试一"],item["__rowNum__"] - 1,"测试一",1);
              obj.voltName = _this.checkEmpty(item["测试二"],item["__rowNum__"] - 1,"测试二",4); //表格中的展示的数据
              obj.voltLevel = importDataMatch.getDataKey(importDataMatch.importVoltList,item["测试二"]) || "";//给后台传编码
              obj.feaAppDInvest = item["测试二级表头"] || "";
              obj.sanctionLine = item["__EMPTY"] || "";
              obj.sanctionCapability = item["__EMPTY_1"] || "";
              obj.apprFileNo = item["__EMPTY_2"] || "";
              obj.feaAppDate = _this.checkDate(item["__EMPTY_3"],item["__rowNum__"] - 1,"时间1",18);
              obj.hzDInvest = item["测试二级表头"] || ""; 
              obj.hzLine = item["__EMPTY_4"] || "";
              obj.hzCapality = item["__EMPTY_5"] || "";
              obj.approvalReplyNum = item["__EMPTY_6"] || "";
              obj.hzReplyDate =  _this.checkDate(item["__EMPTY_7"],item["__rowNum__"] - 1,"时间2",23); 
              data.push(obj);
          });
          return data;
      },
      checkEmpty(data, index, name, column){
            if(data == undefined || (data+"").trim() == ""){
              this.tipMessage(`导入失败<br><br>第[${index}]行,第[${column}]个单元格,【${name}】必填的字段未填,请重新设置!`)
              throw '导入失败!'
            }else {
              return (data+"").trim();
            }
      },
      //参数: 数据  行号 字段名称 列号 是否判空
      checkNum(num, index, name, column, emptyFlag) {
          if(emptyFlag){
              if(num == undefined){
                  this.tipMessage(`导入失败<br><br>第[${index}]行,第[${column}]个单元格,【${name}】必填的字段未填,请重新设置!`)
                  throw '导入失败!'
              }
          }
          const reg = /[^\d\.]/;
          if (reg.test(num)) {
              this.tipMessage(`导入失败<br><br>第[${index}]行,第[${column}]个单元格,【${name}】填写格式不正确,应该填写数字,请重新设置!`);
              throw '导入失败!'
          }
          const temp = parseFloat(num);
          if (isNaN(temp)) {
              this.tipMessage(`导入失败<br><br>第[${index}]行,第[${column}]个单元格,【${name}】填写格式不正确,应该填写数字,请重新设置!`);
              throw '导入失败!'
          } else {
              return temp.toFixed(4);
          }
      },
      checkDate(date, index, name, column, emptyFlag) {
          if(emptyFlag){
              if(date == undefined){
                  this.tipMessage(`导入失败<br><br>第[${index}]行,第[${column}]个单元格,【${name}】必填的字段未填,请重新设置!`);
                  throw '导入失败!'
              }
          }
          date = this.formatDate(date,'-')
          var DATE_FORMAT = /^[0-9]{4}-[0-1]?[0-9]{1}-[0-3]?[0-9]{1}$/; //判断是否是日期格式
          if(!DATE_FORMAT.test(date)){
              this.tipMessage(`导入失败<br><br>第[${index}]行,第[${column}]个单元格,【${name}】日期格式不正确,请重新设置!`);
              throw '导入失败!'
          } else {
              return date;
          }
      },
      // 格式化日期 读取excel中日期格式会变成一个数字 numb为读取到的值  format是格式样式 ‘-’或‘/’
      formatDate(numb, format) {
          const time = new Date((numb - 1) * 24 * 3600000 + 1)
          time.setYear(time.getFullYear() - 70)
          const year = time.getFullYear() + ''
          const month = time.getMonth() + 1 + ''
          const date = time.getDate() - 1 + ''
          if (format && format.length === 1) {
              return year + format + month + format + date
          }
          return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
      }, 
      tipMessage(content){
          this.$messageElement({
              message: content,
              type: 'info',
              dangerouslyUseHTMLString: true,
          });
      },
      
    3. 表格样式:
      在这里插入图片描述

    展开全文
  • vue导入导出excel文件

    2019-04-16 09:00:39
    vue导入导出excel文件所需要用到的依赖文件,从网上转载而来,并非原创。大家需要可以从别处下载,这里下载需要积分,本人上传只是为了方便保存以供以后所用。
  • 主要介绍了Vue结合后台导入导出Excel问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue导入Excel复杂表头(合并单元格)

    千次阅读 多人点赞 2021-08-11 09:03:21
    前端Vue导入复杂表头、导出复杂表头 一般情况下都是有我们的后端来操作这个文件的读写,但总有特殊情况嘛,就比如我公司后台人员配置较少,没时间…,于是我就自己开始鼓捣了,先展示一下成果,上图: 表格导入效果(需要...

    前端Vue导入Excel复杂多级表头、导出复杂表头

    一般情况下都是有我们的后端来操作这个文件的读写,但总有特殊情况嘛,就比如我公司后台人员配置较少,没时间…,于是我就自己开始鼓捣了,先展示一下成果,上图:
    表格导入效果(需要自己处理一下数据格式)

    在这里插入图片描述

    导出效果:

    在这里插入图片描述

    复杂表头(合并单元格)导入实现过程

    1.首先我们的excel的导入导出都是依赖于js-xlse实现的,在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据

    2.通过这个插件给我们读到的excel格式是这样子的 worksheet:
    在这里插入图片描述
    在这里插入图片描述

    之后通过github给我们提供的api使用文档可发现,官方给我们提供了很丰富的使用函数工具如图(我们主要会用到图中红色的框内的:

    sheet_to_json()

    已经帮助我们把之前的数据格式拼成对象th与td对应的数据格式了
    在这里插入图片描述
    在这里插入图片描述
    但是,只可以是适用于简单的没有合并单元格的表头进行导入:
    下面我们再来试试比较复杂的表头进行导入:
    在这里插入图片描述
    转化为:
    在这里插入图片描述

    这样数据就很明显的对应不上了,所以我们的思路就是找到他的源码改一下sheet_to_json方法实现我们的复杂表头导入.

    不知道你们的编辑器用的是什么,我用的webstrom查看这个sheet_to_json()
    源码就会给我跳到ts源码里,看不到真正的源码,后来我还是打的debugger在Source里找到的源代码,各位大佬都可以自己尝试着改一下源码试试

    经过了长达三天的努力,效果最终达到了,效果就是本文章最顶部的图.

    在这里卖个关子哈,作者也是刚毕业一年的小菜鸡,相较本平台的大佬啥也不是,如果你想要这种导入复杂表格的效果,可以加我扣扣免费获取,让我也知道我的代码对你们有所帮助,嘿嘿…导出复杂表头的就自己百度把,导出的有很多人写.
    QQ:1774420802 加备注csdn

    展开全文
  • vue导入Excel

    2019-08-22 13:48:04
    点击导入,使用input创建导入按钮 <input type="file" name="file" id="file" :value="value" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, ...
  • vue导入Excel文件,获取表格里面的内容,并回显在页面上。
  • 2. 新建uploadExcel.js文件 import Vue from 'vue' import XLSX from 'xlsx' /** * 导入ex表格 得到json数据 * 已注入所有Vue实例, * template模板里调用 $importf * 组件方法里调用 this.$importf * 例...
  • 直接上代码,使用vue实现表格excel导入功能,使用vue实现表格excel的导出功能
  • NET CORE Vue 导入EXCEL

    2021-12-03 09:18:03
    using NPOI.SS.UserModel; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.IO;...using System.Reflection;... /// 读取Excel多Sheet数据 /// </su.
  • vue导入excel文件,vue导入多个sheets

    千次阅读 2020-05-12 18:11:18
    用input 导入 excel 然后生成表格 html 导入按钮和选择文件的弹框 <el-button v-waves :loading='downloadLoading' class='filter-item' type='primary' icon='el-icon-download' @click='daoru'> 导入...
  • // cnpm install vue-xlsx-table -S // main.js中 import vueXlsxTable from 'vue-xlsx-table' Vue.use(vueXlsxTable, {rABS: true}) // 组件中 //template <vue-xlsx-table @on-select-file="handleSelectedFile...
  • 安装依赖 > npm install -S file-saver xlsx > npm install -D script-loader ...// handleUpBtns 触发导入事件的方法(table是用来判定导入数据的用处) <div style="margin-bottom: 10px"> .
  • 由于项目需要同时导入excel文档和jpg图片,因此尝试了一些方法来完成任务。 图片数据是以base64格式存入的,显示和转移都比较方便。 一开始考虑的是将图片插入excel中,这样的好处是一一对应,不会出错,但是搜索了...
  • 提供解析Excel数据导入数据库思路 HTML部分 <div class="wrap js-check-wrap" id="vueContainer" v-cloak> <div class="ant-card"> <div class="ant-card-body"> <div class="table-...
  • vue 导入excel 将数据显示在表格

    千次阅读 2020-04-18 17:49:31
    <template> <div> <el-upload class="upload-demo" action :on-change="handleChange" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="li...
  • Vue 导入excel 功能

    千次阅读 2019-05-03 11:14:14
    excel 作为 表格,像一个二维数组,或者也可以说是一维数组对象。 如果一行作为一个一维数组的值,每个表格则是一个key,value 对象 。表头作为 key ,单元格中的内容作为 value。 我们如何将 excel 文件中的内容...
  • @vue导入 excel表格 获取数据 保存一下,方便以后查看 https://blog.csdn.net/a736755244/article/details/99568133 1、引入依赖 npm install -S file-saver xlsx npm install -D script-loader npm install ...
  • vue导入excel时报错

    2021-12-29 17:07:38
    报错的地方,显示找不到这个接口url,用postman可以成功导入,但是在前台页面导入就会报错,不会写vue,一直找不到原因 代码
  • npm install vue-xlsx-table --save 2 全局声明 main.js import vueXlsxTable from 'vue-xlsx-table' Vue.use(vueXlsxTable, {rABS: false}) 3 使用 <template> <div id="app"> <h1&...
  • js-xlsx vue导入excel在线预览

    千次阅读 2021-03-15 11:36:20
    js-xlsx vue导入excel在线预览 导入XLSX库 官方地址Github 安装 npm install xlsx --s 引入 import XLSX from ‘xlsx’ HTML <template> <div class="upload-container"> <el-upload ref="upload...
  • vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type=file d=file_input @change=importf(this) accept=.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, ...
  • 主要介绍了使用Vue+Spring Boot实现Excel上传,需要的朋友可以参考下
  • vue实现导入Excel数据

    千次阅读 2022-03-08 15:46:06
    导入 1、api链接 introductionCarModelInfoApi='/carModel/info/introductionCarModelInfo', 2、接口操作 export function importExcel(data: any) { return new Promise(async () => { const { create...
  • vue 导入excel功能

    2020-12-20 05:13:39
    chooseFile(){this.excelData = [];document.getElementById(this.fileId).value = null;this.imFile.click();},importf(obj) {let _this = this;this.file = this.$refs.imFile.files[0];// this.$refs.imFile.valu...
  • 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >...
  • 需要导入excel,并获取Excel文件中的内容 最后需要的数据格式: [ { name:'tom', age:18, gender:'男' }, { name:'candy', age:18, gender:'女' } ] 代码如下: // template // 需要使用input type="file...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,483
精华内容 2,193
关键字:

vue导入excel

友情链接: xgfadianji.zip