Vue 批量导入 excel 表格数据

一、安装依赖

npm install file-saver xlsx -S
npm install script-loader -D

二、按需引入（在用到的组件中引入）

import * as XLSX from 'xlsx'

三、使用（全部代码）

<template><div class="function-point-container"><!-- 批量导入 --><el-buttontype="primary"@click="$refs.excelBtn.click()">批量导入</el-button><el-uploadv-show="false"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"action:auto-upload="false":show-file-list="false":on-change="importData"><span ref="excelBtn">导入EXCEL</span></el-upload></div>
</template><script>
import * as XLSX from 'xlsx'export default {name: 'FunctionPoint',data() {return {}},created() {},methods: {// 批量导入importData(file, fileList) {// 拿取文件对象const f = file.raw// 用 FileReader 来读取let reader = new FileReader()// 重写 FileReader 上的 readAsBinaryString 方法FileReader.prototype.readAsBinaryString = f => {let binary = ''let wb // 读取完成的数据let outdata // 你需要的数据let reader = new FileReader()reader.onload = e => {// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）let bytes = new Uint8Array(reader.result)let length = bytes.byteLengthfor (let i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i])}// 接下来就是xlsx了，具体可看apiwb = XLSX.read(binary, {type: 'binary',cellDates: false})outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])const result = this.generateParam(outdata)console.log('result--', result)// 下面就进行接口调用了...}reader.readAsArrayBuffer(f)}reader.readAsBinaryString(f)},// 生成导入参数generateParam(data) {const params = []// 这里根据实际表格 title 值、接口参数值，灵活变化const parse = {序号: 'index',姓名: 'name',性别: 'sex',年龄: 'age',手机号: 'phone',地址: 'address'}data.forEach(item => {let obj = {}const keys = Object.keys(parse)const itemKeys = Object.keys(item)itemKeys.forEach(key => {const val = item[key]if (keys.includes(key)) {obj[parse[key]] = val}})params.push(obj)})return params}}
}
</script><style lang="scss" scoped>
</style>

Vue 批量导入 excel 表格数据相关推荐

java操作mysql导表_Java实现批量导入excel表格数据到数据库中的方法
本文实例讲述了Java实现批量导入excel表格数据到数据库中的方法.分享给大家供大家参考,具体如下: 1.创建导入抽象类 package com.gcloud.common.excel; impor ...
matlab批量导入excel表格数据,matlab导入excel表格数据-如何用matlab读取多个excel表格数据，将每个表格数......
如何用matlab读取多个excel表格数据,将每个表格数... 一xlsread()函数,比import简单的多,具体语句:A = xlsread('yourfilename.xls')望高手支招! ...
jsp后台批量导入excel表格数据到mysql中_PHP批量导入excell表格到mysql数据库
PHP批量导入excell表格到mysql数据库,本人通过亲自测试,在这里分享给大家 1,下载 php excell类库网上搜索可以下载,这里不写地址 2,建html文件请选择你要上传的EXCE ...
jsp后台批量导入excel表格数据到mysql中_运用java解析excel表，拿到表中的数据并批量插入数据库...
首先,本文是运用jxl进行excel表的解析,所以我们需要先下载一个jxl.jar的jar包: 并且需要一个与excel表对应的实体类,用于接收excel的数据: 然后就是代码部分,我们先编写一个函数 ...
如何向phpMyAdmin中批量导入excel表格数据
前言: 这两天有个新需求,有大批量数据要导到服务器数据库中,一个个手录肯定不现实然后我想着写个脚本但是一个个度也慢,而且我也不会写脚本,就百度,一开始用的方法是把excel表导入到navicat中,在 ...
vue下载excel表格模板和导入excel表格数据
vue下载excel表格模板和导入excel表格数据 vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载 ...
如何在ex表格导入php_怎么使用php把表格中的数据导入到excel中,php如何快速导入excel表格数据...
php怎么导入大量数据的excel php导出数据的Excel: PHP从数据库分多次读取100万行记录,和分将100万入文本文件都没问题 Excel可以支100万行记录,Excel 2003最大支持 ...
php导入excel表格数据,php页面导入excel表格数据-php导入excel 怎么获取excel表格数据...
PHP如何导出当前页面中的表格至Excel 常用的用PHP读取EXCEL的方法有以下三种,各自有各自的优缺点.个人推荐用第三种方法,因为它可以跨平台使用. 1. 以.csv格式读取将.xls转换成. ...
php excel导入数据库显示乱码,php修改excel表格数据库数据格式-使用phpexcel导入excel表格数据到MYSQL，乱码怎么解决...
PHP 用PHPExcel往数据库导入大量数据估计0是null,所以不显示了,可以换个思路,让他显示为字符串 $number = 0; echo ''.$number 原生PHP代码实现excel导 ...

Vue 批量导入 excel 表格数据

一、安装依赖

二、按需引入（在用到的组件中引入）

三、使用（全部代码）

Vue 批量导入 excel 表格数据相关推荐

最新文章

热门文章