vue表格导出excel简书,vue实现数据导出为excel
导出excel是前端管理系统最常用的功能。本文主要介绍基于Vue实现Excel解析和导出功能的相关资料。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
前言介绍
代码实现
基本结构
解析Excel的导出
基本结构
导出Excel
摘要
前言
最近整理日常开发中涉及的业务需求，刚好想到开发中比较常见的excel的分析上传。利用周末做一些整理和学习。
基本介绍
它主要基于Vue元素实现文件分析和导出。用的插件是xlsx。有兴趣的话，请研究一下。基本的款式和配置就不赘述了，也比较简单。我们就直接去主食了。
代码实现
基本结构
点击用户文件上传，在页面上显示json格式的excel表格。在用户操作并检查数据之后，他提交服务并上传用于操作的元素中的上传组件。
！-上传文件按钮-
div class=buttonBox
El-上传
行为
接受=。xlsx，xls
:自动上传=false
:show-file-list=false
:on-change=handle
El-button type= primary slot= trigger 选择EXCEL文件/el-button
/El-上传
El-button type= success @ click= submit :disabled= disable 收集数据提交/el-button
/div
！-解析后的数据-
div class= tableBox v-show= show
h3
i class=el-icon-info/i
师傅，这是收集到的数据。请检查后点击“收集数据提交”按钮上传到服务器！
/h3
El-table:data= tempData style= width:100% :height= height border
El-table-column prop= name label= name min-width= 50% /El-table-column
El-表格-列属性=电话标签=电话最小宽度= 50% /El-表格-列
/el-table
/div
上传解析
上传组件可以获取上传的文件流(如下)。
将文件转换为二进制，这里我们可以在utils文件中添加相应的方法(如下)
//按照二进制读取文件
导出函数readFile(file) {
返回新承诺(resolve={
let reader=new FileReader()；
reader.readAsBinaryString(文件)；
reader.onload=ev={
resolve(ev . target . result)；
};
});
}
Xlsx将二进制六转换成json，这样就可以显示了。
//读取文件中的数据(转换成JSON格式)
let data=await readFile(文件)；
let workbook=xlsx.read(data，{ type: binary })，
工作表=工作簿。工作表[工作簿。工作表名称[0]]；
data=xlsx.utils.sheet_to_json(工作表)；
//打印结果如下图。
console.log(工作簿)；
为了将读取的数据转换成最终可以传输到服务器的数据，我们需要封装一个映射表，以对应传输到后端的格式(如下所示)
//字段对应表
导出字母字符={
名称：{
文本：“姓名”，
类型：“字符串”
},
电话：{
文本：“电话”，
类型：“字符串”
}
};
转换数据格式
设arr=[]；
data.forEach(item={
设obj={ }；
对于(输入字符){
如果(！character . hasownproperty(key))break；
设v=字符[键]，
text=v.text，
type=v.type
v=item[text] ；
type===string ？(v=String(v)):null；
type===number ？(v=Number(v)):null；
obj[key]=v；
}
arr . push(obj)；
});
发送到服务器
在这里，它依赖于服务器对多个文件一起发送的支持。如果不支持我们，前端可以逐个递归发送。具体情况可以和后端沟通，我们用递归进行传输。
//向服务器提交数据
异步提交(){
if (this.tempData.length=0) {
这个消息({
消息： 小主，请您先选择超过文件!,
类型：警告，
showClose: true
});
返回；
}
this.disable=true
让加载实例=加载。服务({
文本： 小主，请您稍等片刻，奴家正在玩命处理中！
背景：“rgba(0，0，0，5)"
});
//完成后处理的事情
让抱怨=()={
这个消息({
消息： 小主，奴家已经帮您把数据上传了!,
类型："成功",
showClose: true
});
this.show=false
this.disable=false
正在加载实例。close()；
};
//需要把数据一条条传递给服务器
设n=0；
let send=async ()={
if (n this.tempData.length - 1) {
//都传递完了
complate()；
返回；
}
让身体=这个。tempdata[n]；
//走接口
let result=await create API(body)；
if(parse int(result。code)==0){
//成功
n；
}
send()；
};
send()；
}
以上就是对超过文件的解析与上传的总结，其实并不是很难，都是日常开发常常涉及的业务，接下来一起看下超过的导出吧
Excel的导出
基本结构
一进来页面获取刚刚上传的文件，然后显示在表格中，然后做个分页.这些就不说了，我们直接从点击导出超过按钮开始，先看下页面结构
div class=容器
！-上传按钮-
div class=buttonBox
路由器-链接到=/上传
El-工具提示内容=EXCEL数据采集placement=top
El按钮类型=主要图标= El图标-编辑圆形/el-button
/El-工具提示
/路由器链接
/div
！-搜索区域-
div class=searchBox
El-input v-model= search placeholder=基于姓名、手机模糊搜索@ change=搜索句柄/El-input
el按钮类型=成功@click=提交：disabled=“disabled”导出选中的数据/el-button
/div
！-列表区域-
div class=tableBox
埃尔表
:data=tableData
:height=height
style=宽度：100%
垂直加载="加载"
element-loading-text=小主，奴家正在努力加载中.
@ selection-change=选择更改
埃尔-表格列type= selection width= 50 align= center /El-表格列
El-表格-列属性=id 标签=编号最小宽度= 10% /El-表格-列
El-table-column prop= name label=姓名最小宽度= 20% /El-表格-列
El-table-column prop= phone label=电话最小宽度= 20% /El-表格-列
El-表格-列属性=时间标签=创建时间最小宽度= 25% :formatter= formatter /El-table-column
/el-table
/div
！-分页区域-
div class=pageBox
埃尔分页
背景
单页隐藏
布局=总计，大小，上一页，翻页，下一页
:page-size=pageSize
:current-page=page
:total=total
@size-change=sizeChange
@current-change=prevNext
@prev-click=prevNext
@next-click=prevNext
/El-分页
/div
/div
导出Excel
将数据数据变为表数据，新建表格，在表格中插入一个床单，通过文件格式的发送方法将文件写入
//导出数据
提交(){
如果(这个。选择列表。长度=0){
这个消息({
消息： 小主，请您先选择要导出的数据哦!,
类型：警告，
showClose: true
});
返回；
}
this.disabled=true
让加载实例=加载。服务({
文本： 小主，请您稍等片刻，奴家正在玩命处理中.
背景：“rgba(0，0，0，5)"
});
让arr=这个。选择列表。地图(项目={
返回{
编号：item.id，
名称：项目名称，
电话：项目.电话
};
});
//将json数据更改为工作表数据
let sheet=xslx . utils . JSON _ to _ sheet(arr)，
//创建新表
book=xslx . utils . book _ new()；
//在表格中插入工作表
xslx . utils . book _ append _ sheet(book，sheet， sheet 1 )；
//通过xlsx的writeFile方法将文件写入
xslx.writeFile(book， user${new Date()。getTime()} . xls `)；
loading instance . close()；
this.disabled=false
}
* *以上是Excele的相关操作，文件上传和分析是常见需求。如果前端的朋友对大文件上传和断电续传感兴趣，可以参考我的文章《大文件上传和断点续传》。
总结
基于Vue实现Excel的分析和导出功能的文章到此结束。有关分析和导出Vue Excel的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。