-
vue读取excel表格数据_vue 利用 js-xslx 读取 excel 表格文件
2020-12-22 11:55:03文件读取~~~表格数据excel读取数据.jpg// template// 文件选择,或者使用原生 imput type 为 fileaction="/":on-change='onChange':auto-upload='false':show-file-list="false"accept=".xls, .xlsx">选择文件{{ ...文件读取~~~
表格数据
excel读取数据.jpg
// template
// 文件选择,或者使用原生 imput type 为 file
action="/"
:on-change='onChange'
:auto-upload='false'
:show-file-list="false"
accept=".xls, .xlsx"
>
选择文件
{{ fileData.name }}// js
data() {
return {
outputs: [], // 保存读取出来的数据
fileData:'', // 保存选择的文件
};
},
methods: {
// 文件选择回调
onChange(file,fileList){
this.fileData = file // 保存当前选择文件
this.readExcel() // 调用读取数据的方法
},
// 读取数据
readExcel(e) {
let that = this;
const files = that.fileData;
console.log(files);
if (!files) {
//如果没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error("上传格式不正确,请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
// console.log(data)
const workbook = XLSX.read(data, {
type: "binary"
});
console.log(workbook.SheetNames)
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
console.log(ws);
that.outputs = []; //清空接收数据
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字,值则是 ws[i][对应表头名]
name:ws[i]['姓名'],
age:ws[i]['年龄'],
};
that.outputs.push(sheetData);
}
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
}
}
-
vue读取excel表格数据_小程序读取excel表格数据,并存储到云数据库
2021-01-03 03:37:12老规矩先看效果图效果其实很简单,就是把excel里的数据解析出来,然后存到云数据库里。说起来很简单。但是真的做起来的时候,发现其中要用到的东西还是很多的。不信。。。。那来看下流程图流程图通过流程图,我看看...最近一直比较忙,答应大家的小程序解析excel一直没有写出来,今天终于忙里偷闲,有机会把这篇文章写出来给大家了。
老规矩先看效果图
效果其实很简单,就是把excel里的数据解析出来,然后存到云数据库里。说起来很简单。但是真的做起来的时候,发现其中要用到的东西还是很多的。不信。。。。那来看下流程图流程图
通过流程图,我看看到我们这里使用了云函数,云存储,云数据库。
流程图主要实现下面几个步骤1,使用wx.chooseMessageFile选择要解析的excel表格
2,通过wx.cloud.uploadFile上传excel文件到云存储
3,云存储返回一个fileid 给我们
4,定义一个excel云函数
5,把第3步返回的fileid传递给excel云函数
6,在excel云函数里解析excel,并把数据添加到云数据库。
可以看到最神秘,最重要的就是我们的excel云函数。
所以我们先把前5步实现了,后面重点讲解下我们的excel云函数。
一,选择并上传excel表格文件到云存储
这里我们使用到了云开发,使用云开发必须要先注册一个小程序,并给自己的小程序开通云开发功能。这个知识点我讲过很多遍了,还不知道怎么开通并使用云开发的同学,去翻下我前面的文章,或者看下我录的讲解视频《5小时入门小程序云开发》
1,先定义我们的页面
页面很简单,就是一个按钮如下图,点击按钮时调用chooseExcel方法,选择excel
对应的wxml代码如下2,编写文件选择和文件上传方法
上图的chooseExcel就是我们的excel文件选择方法。
uploadExcel就是我们的文件上传方法,上传成功以后会返回一个fildID。我们把fildID传递给我们的jiexi方法,jiexi方法如下3 把fildID传递给云函数
二,接下来就是定义我们的云函数了。
1,首先我们要新建云函数
如果你还不知道如何新建云函数,可以翻看下我之前写的文章,也可以看我录的视频《5小时入门小程序云开发》
如下图所示的excel就是我们创建的云函数2,安装node-xlsx依赖库
如上图所示,右键excel,然后点击在终端中打开。打开终端后,
输入 npm install node-xlsx 安装依赖。可以看到下图安装中的进度条
这一步需要你电脑上安装过node.js并配置npm命令。3,安装node-xlsx依赖库完成
三,编写云函数
我把完整的代码贴出来给大家
const cloud = require('wx-server-sdk')
cloud.init()
var xlsx = require('node-xlsx');
const db = cloud.database()
exports.main = async(event, context) => {
let {
fileID
} = event
//1,通过fileID下载云存储里的excel文件
const res = await cloud.downloadFile({
fileID: fileID,
})
const buffer = res.fileContent
const tasks = [] //用来存储所有的添加数据操作
//2,解析excel文件里的数据
var sheets = xlsx.parse(buffer); //获取到所有sheets
sheets.forEach(function(sheet) {
console.log(sheet['name']);
for (var rowId in sheet['data']) {
console.log(rowId);
var row = sheet['data'][rowId]; //第几行数据
if (rowId > 0 && row) { //第一行是表格标题,所有我们要从第2行开始读
//3,把解析到的数据存到excelList数据表里
const promise = db.collection('users')
.add({
data: {
name: row[0], //姓名
age: row[1], //年龄
address: row[2], //地址
wechat: row[3] //wechat
}
})
tasks.push(promise)
}
}
});
// 等待所有数据添加完成
let result = await Promise.all(tasks).then(res => {
return res
}).catch(function(err) {
return err
})
return result
}上面代码里注释的很清楚了,我这里就不在啰嗦了。
有几点注意的给大家说下1,要先创建数据表
image.png 2,有时候如果老是解析失败,可能是有的电脑需要在云函数里也要初始化云开发环境
四,解析并上传成功
如我的表格里有下面三条数据
点击上传按钮,并选择我们的表格文件
上传成功的返回如下,可以看出我们添加了3条数据到数据库添加成功效果图如下
到这里我们就完整的实现了小程序上传excel数据到数据库的功能了。
再来带大家看下流程图
目前源码先提供给年卡和季卡用户,办理过会员的同学都可以从下面链接里获取源码。石头哥等下也会在年卡群里把源码发给大家。
一星期后,我会把源码免费开源出来给大家。敬请等待。
如果你有遇到问题,可以在底部留言,我看到后会及时解答。后面我会写更多小程序云开发实战的文章出来。也会录制本节的视频出来,敬请关注。
-
vue读取excel表格数据_vue excel文件的导入读取和下载
2020-12-22 11:54:59导读:后台管理平台经常要上传文件读取文件的内容和导出数据表,因此需要依赖第三方插件xlsx1、安装依赖npm install xlsx -S2、在目标组件vue中引入import XLSX form 'xlsx3、简单的创建并导出数据表data() {return ...导读:后台管理平台经常要上传文件读取文件的内容和导出数据表,因此需要依赖第三方插件xlsx
1、安装依赖
npm install xlsx -S
2、在目标组件vue中引入
import XLSX form 'xlsx
3、简单的创建并导出数据表
data() {
return {
xlxsData: [ // 源数据
{
'type': '颜色',
'ID': '34234',
'name': 'Light Pink'
}
]
}
},
methods: {
downExcle() {
const outputXlsxFile = (data, header, xlsxName) => {
const ws = XLSX.utils.json_to_sheet(data, header)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
XLSX.writeFile(wb, xlsxName + '.xlsx')
};
// 理想数据模型
//let data = [
// {
// "类型": "颜色",
// "id": "34234",
// "名称": "Light Pink"
// }
//];
// 实际数据模型 this.xlxsData
// 映射表头mapList
const mapList= {
"type": "类型",
"id": "ID",
"name": "名称"
}
let header = {
header: Object.values(mapList) // 获取中文表头
}
// 调用filterJson函数进行JSON转化
outputXlsxFile(this.filterJson(mapList), header, '标签批量模版')
},
// 将中文映射成英文键
filterJson(mapList) {let res = [];
this.xlxsData.map(item => { // 对源数据处理,将英文键转化成中文
let obj = {}
for (let key in mapList)
obj[mapList[key]] = item[key] // 保持xlxsMap的键和源数据一致,否则会有数据会缺少
}
res.push(obj)
})
return res
}
}
注: 一般data的格式不会是中文键名,因此需要过滤函数,进行转化
4、导入并读取excel文件
action="/"
:on-change="uploadChange"
:show-file-list="false"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false">
导入数据
data() {
return {
xlscList: [],
xlscTitle: {
"类型": "type"
"ID": "id",
"名称": "name"
},
}
},
methods:{
uploadChange(file) {
let self = this;
const types = file.name.split('.')[1];
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => {
return item === types
});
if (!fileType) {
this.$message.error('文件格式错误,请重新选择文件!')
}
this.file2Xce(file).then(tab => {
// console.log(tab)
// 过滤,转化正确的JSON对象格式
if (tab && tab.length > 0) {
tab[0].sheet.forEach(item => {
let obj = {};
for (let key in item) {
obj[self.xlscTitle[key]] = item[key];
}
self.xlscList.push(obj);
});
// console.log(self.xlscList)
if (self.xlscList.length) {
this.$message.success('上传成功')
// 获取数据后,下一步操作
} else {
this.$message.error('空文件或数据缺失,请重新选择文件!')
}
}
})
},
// 读取文件
file2Xce(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
this.wb = Xlsx.read(data, {
type: "binary"
});
const result = [];
this.wb.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: Xlsx.utils.sheet_to_json(this.wb.Sheets[sheetName])
})
})
resolve(result);
}
reader.readAsBinaryString(file.raw);
})
}
注: 以上的导出的excel不能自定义样式,需要一样插件xlsx-style, 喜欢的同学可以自行研究
-
vue读取excel表格数据_Vue+ElementUI+xlsx插件实现获取Excel表格的数据
2021-01-13 11:09:53一、安装xlsxnpm install xlsx二、引入xlsximport XLSX from 'xlsx'三、模板class="import hidden-xs-only"ref="upload"action="/":show-file-list="false":on-change="import...导入Excel表格四、导入方法//导入...一、安装xlsx
npm install xlsx
二、引入xlsx
import XLSX from 'xlsx'
三、模板
class="import hidden-xs-only"
ref="upload"
action="/"
:show-file-list="false"
:on-change="importExcel"
:auto-upload="false"
>
导入Excel表格
四、导入方法
//导入
importExcel(file) {
// let file = file.files[0] // 使用传统的input方法需要加上这一步
const types = file.name.split('.')[1]
const fileType = ['xlsx','xls'].some((item) => item === types)
if (!fileType) {
this.$message('格式错误!请下载词库导入模板编辑后上传')
return false
}
this.file2Xce(file).then((tabJson) => {
if (tabJson && tabJson.length > 0) {
this.xlsxJson = tabJson//Excel表格的数据
//...
//...
//处理表格数据的操作
}
})
},
file2Xce(file) {
return new Promise(function(resolve) {
const reader = new FileReader()
reader.onload = function(e) {
const data = e.target.result
this.wb = XLSX.read(data, {
type: 'binary',
})
const result = []
this.wb.SheetNames.forEach((sheetName) => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName]),
})
})
resolve(result)
}
reader.readAsBinaryString(file.raw)
// reader.readAsBinaryString(file) // 传统input方法
})
},
//导入 end
-
vue读取excel表格数据_vue 2.x 导入excel获取Excel数据
2020-12-22 11:55:01//读取完成的数据 var outdata; var reader = new FileReader(); reader.onload = function(e) { var bytes = new Uint8Array(reader.result); var length = bytes.byteLength; for (var i = 0; i ; i++) { binary ... -
vue使用xlsx实现上传excel表格并读取到表格数据
2020-06-19 10:25:28转载大佬的博客,原文请看: ...今天我们来详细讲解怎样使用xlsx实现前端上传...然后,我们再使用xlsx,封装一个读取excel表格数据的组件: <template> <span style="margin-right:10px"> <input clas -
vue+Element-ui实现前端读取 excel 表格数据转换为 JSON 数据进行展示
2019-09-26 14:54:19vue Element Ui 通过 el-upload 来读取表格文件,借助 XLSX(安装: npm i XLSX -S) 来实现读取到的表格转为 JSON 数据格式,然后展示在 el-table 中。 <template> <div> <!-- 按钮 --> &... -
c#后台如何导出excel到本地_vue导入excel表格数据-vue 我想把前端的一个 list导出excel,后台是 c#?...
2020-12-30 15:42:22vue怎么把excel转jsona={'3:39:20'}xlswrite('a.xls',a)如果你要写到其他数据表的某个单元格可以这样:a={'3:39:20'}xlswrite('a.xls',a,'sheet2','A2')?你这个就是个时间转换问题。读取的时候自己进行了时间转换,... -
Java和Vue导出Excel表格
2018-11-19 20:43:00后台:利用java pio读取Excel,配合java反射,写了一个万能的excel导出模板,只要设置表头一个数组,和你的数据模型(可能会有潜在bug,但是目前使用正常) 主要是为了大家以后避免一些坑,拿来即用 ... -
vue + elment-ui导入上传excel表格并读取数据
2019-10-17 09:30:18按钮时,打开文件夹,选择excel表并上传,读取excel表中的内容,并把内容填写至<el-table>之中,如图: 接下来需要做的是安装3个依赖和添加两个js文件: npm install -S file-saver xlsx(这里其实... -
vue-element-xlsx在线读取Excel数据预览
2020-09-22 21:18:28vue-element-xlsx在线读取Excel数据预览 1.安装XLSX npm install xlsx -s 2.复制过去就可以用 <template> <div> <!-- excel表格上传 --> <el-upload class="upload-demo" drag ... -
vue 上传excel 识别excel 转换excel为data数据或转换data数据为excel并导出
2020-07-17 12:01:27实现批量导入 读取Excel表格转换成所需data数据 附图------ 一。 1. 首先 项目中引入插件XLSX并注册 2. 下图为dom结构。。。。。。。 3. 选择文件 调用api方法读取Excel数据。并设置需要读取的thead ... -
VueCli4.0项目中将excel表格数据导入Elment UI表格并展示(映射的表格标题必须为英文)
2020-03-26 18:09:44第一步、导入并读取Excel功能从整体上来说两种方式,一是前端解析文件后将数据返回给后端,另一种是前端直接将Excel文档返回后台,由后台进行处理。使用哪种方法需要根据具体业务需求,下面简单介绍第一种方法:由... -
vue + elment-ui导入上传excel表格并读取数据(完结版亲测有效!!)
2019-09-04 14:58:41之前试了很多网上的方法都不行,总会出现各种各样的问题,不是这里缺东西...按钮时,打开文件夹,选择excel表并上传,读取excel表中的内容,并把内容填写至<el-table>之中,如图: 接下来需要做的是安装... -
vue使用vue-xlsx-table包读取Excel文件,并实现单元格数据可编辑
2020-03-26 08:26:15Vue读取Excel并以表格形式展现在页面上,并实现单元格数据可编辑第一步、安装:install第二步、引入:main.js第三步、使用:ExcelRead.vue 最近由于公司项目需求,我在画原型图的时候发现,有个功能是前端导入Excel... -
vue项目中实现下载后端返回的excel数据表格
2019-06-28 14:46:07vue项目中,客户端需要实现以excel表格形式下载数据,后端为java,接受请求 >> 读取数据库 >> 生成excel >> 返回;前端为vue:发送请求 >> 接受响应 >> 实现excel下载。 2. 案例... -
vue上传excel并展示_vue实战(15)——基于Element上传Excel读取内容
2020-12-29 07:04:44image.png1、应用场景大多数管理后台很多...表格内容不太多的情况下单次10000条以上(单次上传量还要根据自己的项目情况而定)一般会选择这种方式,数据量太大浏览器读取的速度远远小于服务端读取对于数据量不太大的... -
vue-使用js-xlsx实现前端上传Excel表格(一)
2018-11-29 09:34:58然后,我们再使用xlsx,封装一个读取excel表格数据的组件: <template> <span style="margin-right:10px"> <input class="input-file... -
在Vue中,将数据导出成excel,合并单元格
2020-01-20 17:01:50前段时间接到一个做报表的项目,需要将数据导出成excel表格,表格模板中有很多表格是需要合并的,之前没有这方面的经验,也为难了好久,后来终于发现一个好用的js插件,完全能够实现我需要的功能,一块分享给大家;... -
vue xlsx导出 excel文件过大_Element+js-xlsx实现组件化excel导入导出
2021-02-04 05:05:03前言:以前excel都是使用后端java或者php等语言实现数据的导入和导出,现在可以通过vue的前端项目实现表格的导入和导出,减少后端的压力。同时也可以让前端更好的助力后端。 是原始(很棒)SheetJS / xlsx项目的分支。... -
hutool读取和导出excel_Element+js-xlsx实现组件化excel导入导出
2020-12-30 17:46:40前言:以前excel都是使用后端java或者php等语言实现数据的导入和导出,现在可以通过vue的前端项目实现表格的导入和导出,减少后端的压力。同时也可以让前端更好的助力后端。 是原始(很棒)SheetJS / xlsx项目的分支。... -
vue项目中导入excel文件(使用element-ui)
2019-03-28 16:05:38需要使用的包有 XLSX npm安装: npm install --save xlsx ... :auto-upload="false" // 因为只是读取数据到表格,并不需要上传到服务器 :show-file-list="false" // 因为是直接读到表格,不用展示文件列... -
h5页面如何预览excel文件_HTML页面预览表格文件内容
2020-12-22 15:46:08背景简介在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中vue项目第三方exceljs安装npm install exceljselement ui文件选择el-upload数据展示el-table代码以及说明import Excel from '... -
.vue文件怎么使用_pandas使用2:我怎么读写表格文件
2020-11-27 02:52:10二、我怎么读写表格文件1、我想分析泰坦尼克号乘客数据,它们储存在csv文件中。importpandasaspdtitanic=pd.read_csv("./data/titanic.csv")pandas提供的read_csv()函数可将csv文件中的数据读取到DataFrame中。... -
cxcelJS纯前端插入数据和图片在表格中
2021-01-30 10:44:01ExcelJS可以读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件 安装(本文以在vue框架中使用为例) npm install exceljs file-saver -S 导入 import Excel from "exceljs"; import * as FileSaver from "file... -
表格的标题和内容数据支持放在vuex中吗?
2020-12-08 18:43:13想通过js-xlsx插件读取数据到vuex中,表格所在页面将tableData,columns,titleRows定义成计算字段,貌似表格不能更新,也可能是我不熟悉。</p><p>该提问来源于开源项目:huangshuwei/vue-... -
demo29:导出Excel表格 demo30:动手实现Promise demo31:从Node层获取数据(BFF) demo32:用JavaScript实现一个栈 demo33:编写、使用MyLoading插件 demo34:日历选择器组件 demo35:图片对比 demo36:表格行数据...
-
paramquery-7.1.0.zip
2020-08-01 08:57:14它提供了最快的jQuery网格,treegrid,pivot网格和电子表格等最令人垂涎的功能,并且基于性能,卓越的UX和开放标准的原则构建。Pro的以下功能是对ParamQuery Grid基本功能的补充。 专业功能: 也可用于...
-
实现 MySQL 读写分离的利器 mysql-proxy
-
IDEA Pushfailed:Unabletoacc...OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
-
2021年 系统架构设计师 系列课
-
【Python-随到随学】 FLask第一周
-
owasp mantra.zip
-
用微服务spring cloud架构打造物联网云平台
-
NV3029 Data sheet
-
用Go语言来写区块链(一)
-
java正确的代码_java代码段正确与否
-
物联网基础篇:快速玩转MQTT
-
java正则表达式通配符_【转载】正则表达式和通配符的区别
-
Echarts图表靠右显示(轴和数据都靠右)
-
java正则表达式验证端口号_通过正则表达式验证IP和端口格式的正确性
-
Vue子组件调用父组件的方法
-
java正则表达式的替换字符_Java的;字符串替换(使用正则表达式)?
-
TL1772 + Hanstar Application Guide Ver_00_20051125.pdf
-
Mysql数据库面试直通车
-
java ee 面试讲座_java/javaee基础面试问题
-
TL1769_Initial Sequence_060113.pdf
-
java 注入 引用传递_伪命题:Java传递的值还是引用?