vue表格导出excel,vue excel导入
最近开发遇到一个点击导入按钮让超过文件数据导入在表格的需求，所以下面这篇文章主要给大家介绍了关于某视频剪辑软件导入处理超过表格功能步骤的相关资料，需要的朋友可以参考下
目录
1.前言2.vue导入超过表格2.1 使用ElementUI中的上传组件2.2 使用投入文件上传3.总体代码与效果4.总结
1. 前言
最近遇到前端导入并处理超过表格的情况，趁此机会刚好研究一下某视频剪辑软件导入并处理超过数据；当然自己手撸一个工具没有那么多时间，本文只是借助现有的工具来做一下工具使用总结。
2.vue导入Excel表格
某视频剪辑软件导入超过表格主要有两种常用的方法，一个是借助ElementUI文件上传进行表格导入，另一个是自带的投入做文件上传；以下对两个方法做详细介绍；
2.1 使用ElementUI中的upload组件
安装ElementUI
国家预防机制一元素-ui -S
安装超过表格解析插件
npm i xlsx -S
导入需要用的工具包
从“Vue”导入Vue
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；
从" xlsx "导入{ read，utils }；//注意处理方法引入方式
vue。使用(元素ui)；
引入组件
埃尔-上传
action= https://jsonplaceholder。typicode。 com/posts/
:on-success=handleChange
:file-list=fileList
El-上传
添加处理逻辑
//导入成功时执行
handleChange(res，file，fileList) {
//将文件放入
对于(设I=0；i fileList.lengthi ) {
if (file.name！=文件列表[i].名称){
this.fileList.push({
名称：文件名，
url: ，
uid: file.uid
});
}
}
常量文件={ 0:file }；
this.readExcel(文件);
},
readExcel(文件){
const文件读取器=new fileReader()；
fileReader.onload=ev={
尝试{
常数数据=ev。目标。结果；
const workbook=read(data，{ type: binary })；
const params=[]；
//取对应表生成数据表格内容
工作簿SheetNames.forEach(item={
这个。表格数据。推(utils。sheet _ to _ JSON(工作簿.张[项])；
});
//该算法仅针对表头无合并的情况
if (this.tableData.length 0) {
//获取超过中第一个表格数据表数据[0][0],并且将表头提取出来
对于(这个。表格数据[0][0]中的常量键){
this.tableHead.push(键);
}
}
//重写数据
} catch (e) {
console.log(错误： e )；
返回错误的
}
};
fileReader.readAsBinaryString(文件[0])。raw)；
}
以上处理的数据我这边用组件展示在了页面上，效果如下图：
2.2 使用input文件上传
1.安装超过表格解析插件
npm i xlsx -S
2.导入需要用的工具包
从" xlsx "导入{ read，utils }；//注意处理方法引入方式
3.使用投入
div class=灵活显示
div class=left-box 文件上传（输入):/div
输入类型= file v-on:change= onChange class= file-ipt /
/div
4.添加处理逻辑
基本与上面处理逻辑相同
onChange(e) {
常量文件=e .目标。文件[0]；
const文件读取器=new fileReader()；
fileReader.onload=ev={
尝试{
常数数据=ev。目标。结果；
const workbook=read(data，{ type: binary })；
const params=[]；
//取对应表生成数据表格内容
工作簿SheetNames.forEach(item={
params.push({
名称：项目，
dataList: utils.sheet_to_json(工作簿。纸张[项目])
});
这个。表格数据。推(utils。sheet _ to _ JSON(工作簿.张[项])；
});
//该算法仅针对表头无合并的情况
if (this.tableData.length 0) {
//获取超过中第一个表格数据表数据[0][0],并且将表头提取出来
对于(这个。表格数据[0][0]中的常量键){
this.tableHead.push(键);
}
}
返回参数；
//重写数据
} catch (e) {
console.log(错误： e )；
返回错误的
}
};
fileReader.readAsBinaryString(文件);
}
3. 总体代码与效果
效果如下：
总的样式以及代码如下：
模板
差异
div class=灵活显示
div class=left-box 表格上传(ElementUI):/div
埃尔-上传
action= https://jsonplaceholder。typicode。 com/posts/
:on-success=handleChange
:file-list=fileList
El-上传
El-button size= small type= primary class= El-BTN
点击上传/el-button
div slot= tip class= El-upload-tip
只能上传文件格式文件，且不超过5MB
/div
/El-上传
/div
El-table v-if=表头。 length :data= table data[0] style= width:100%
埃尔-表格-列
v-for=(data，key) in tableHead
:prop=data
:label=data
:key=key
宽度=180
/El-表格-列
/el-table
div class=灵活显示
div class=left-box 文件上传（输入):/div
输入类型= file v-on:change= onChange class= file-ipt /
/div
/div
/模板
脚本
从“Vue”导入Vue
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；
从" xlsx "导入{ read，utils }；
vue。使用(元素ui)；
导出默认值{
data() {
返回{
文件列表：[],//上传文件列表
tableHead: []，//表头
tableData: [] //表数据
};
},
方法：{
onChange(e) {
常量文件=e .目标。文件[0]；
const文件读取器=new fileReader()；
fileReader.onload=ev={
尝试{
常数数据=ev。目标。结果；
const workbook=read(data，{ type: binary })；
const params=[]；
//取对应表生成数据表格内容
工作簿SheetNames.forEach(item={
params.push({
名称：项目，
dataList: utils.sheet_to_json(工作簿。纸张[项目])
});
这个。表格数据。推(utils。sheet _ to _ JSON(工作簿.张[项])；
});
//该算法仅针对表头无合并的情况
if (this.tableData.length 0) {
//获取超过中第一个表格数据表数据[0][0],并且将表头提取出来
对于(这个。表格数据[0][0]中的常量键){
this.tableHead.push(键);
}
}
返回参数；
//重写数据
} catch (e) {
console.log(错误： e )；
返回错误的
}
};
fileReader.readAsBinaryString(文件);
},
handleChange(res，file，fileList) {
//将文件放入
对于(设I=0；i fileList.lengthi ) {
if (file.name！=文件列表[i].名称){
this.fileList.push({
名称：文件名，
url: ，
uid: file.uid
});
}
}
//这个。文件列表=文件列表。切片(-3)；
常量文件={ 0:file }；
this.readExcel(文件);
},
readExcel(文件){
const文件读取器=new fileReader()；
fileReader.onload=ev={
尝试{
常数数据=ev。目标。结果；
const workbook=read(data，{ type: binary })；
const params=[]；
//取对应表生成数据表格内容
工作簿SheetNames.forEach(item={
params.push({
名称：项目，
dataList: utils.sheet_to_json(工作簿。纸张[项目])
});
这个。表格数据。推(utils。sheet _ to _ JSON(工作簿.张[项])；
});
//该算法仅针对表头无合并的情况
if (this.tableData.length 0) {
//获取excel中第一个表格数据tableData[0][0]并提取表头。
for(this . table data[0][0]中的常量键){
this.tableHead.push(键)；
}
}
返回参数；
//重写数据
} catch (e) {
console.log(错误： e )；
返回false
}
};
fileReader.readAsBinaryString(文件[0])。raw)；
}
}
};
/脚本
style lang=scss 范围。上传-演示{
宽度：100%；
}。柔性显示器{
边距：50px 30px
宽度：100%；
显示器：flex
justify-content:灵活开始；左框{
保证金：20 30；
高度：36px
行高：36px
}
}。El-上传{
左边距：40px。el-btn {
字体大小：16px
}。El-上传-提示{
显示：内嵌；
字体大小：12px
}
}。文件-ipt {
宽度：200px
高度：36px
行高：36px
按钮{
背景色：# 409eff
}
}
输入#文件-上传-按钮{
背景色：# 409eff
}
/风格
4. 总结
比较简单的一点就是xlsx包的导入方法，在处理excel表格的时候相当强大。除了导入和数据分析，它还有导出到excel等功能，这是我们日常网站开发中非常常用的。其次，vue对事件的监控和处理方式很容易踩。我们可以看到，使用组件和不使用组件有很大的区别。当然，使用现有组件往往可以获得更好的效果，所以这里推荐你使用方法一来实现这个功能。
最后，本文仅对数据进行简单处理。如果要处理更复杂的表格数据，就需要研究更强大的算法。不喜欢就不要碰。谢谢你。
本文关于vue导入和处理Excel表格的功能步骤到此为止。有关vue导入和处理Excel的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。