vue导出excel,excel表格导入失败
本文详细说明了将Vue导入excel表格并自动下载失败数据的方法，并通过实例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。让我们和边肖一起为有需要的朋友学习吧。
有这样一个要求：一个导入按钮，点击按钮导入excel表。如果excel表中有数据导入失败，系统会自动下载失败数据的excel表。如果所有数据导入成功，系统会提示“导入成功”。
首先附加ElementUI的上传文件组件。
元素-世界上最流行的Vue UI框架
Element，一个基于Vue 2.0的桌面组件库，面向开发者、设计师和产品经理。
https://element.eleme.cn/#/zh-CN/component/upload
官网详细介绍了上传组件的属性和用法，就不展开了。这里主要是用它来实现一开始导入excel表格的需求。(需要在vue项目中引入ElementUI库。详细步骤请参考官网。)
1、引入ElementUI上传组件upload
El-上传
class=上传-演示
action= https://jsonplaceholder . typicode . com/posts/
多个的
:自动上传=false
:file-list=fileList
:on-change=fileChange
El按钮类型=主要导入/el按钮
/El-上传
页面效果
属性介绍
属性
解释
类型
行为
必需参数，上传地址
线
多个的
你支持多个文件吗？
布尔型
自动上传
选择文件后是否要立即上传？
布尔型
Auto-upload我们将其设置为false以避免自动上传，从而使用自定义上传方法。
文件列表
上传文件列表，例如：[{name: food.jpg ，URL: 3359xxx.cdn.com/xxx.jpg}]
排列
变化中
文件状态变化时的钩子会在文件新增、上传成功、上传不成功时调用。
函数(文件，文件列表)
2、点击导入按钮，选择文件（点击“打开”触发on-change）
此时，您可以通过fileChange方法在控制台中打印和查看文件结构。
fileChange(文件，文件列表){
console.log(文件，“文件”)
console.log(文件列表，“文件列表”)
}
3、此时我们已经拿到选择的文件，可以自定义上传方式，将其发送至后端服务器
fileChange(文件，文件列表){
console.log(文件，“文件”)
console.log(文件列表，“文件列表”)
URL= XXX //后端服务器API
let headers={
自订上传时，content-type : multipart/form-data //这个要求标头参数是必要的。
}
设formData=
for(设I=0；i fileList.lengthI ){ //遍历文件数组，文件列表中可能有多个文件。
formData=新表单数据()
formData.append(name ，fileList[i])。姓名)
formData.append(type ，)。xlsx’)
formData.append(file ，fileList[i])。原始)
}
这个。$axios({
标题：标题，
方法： post ，
数据：formData，
网址：网址，
ResponseType:blob //此参数是必需的，否则下载的excel表会提示文件已损坏，无法打开。
}).然后(res={
if(RES . RES . data . size==0){
//如果后台没有返回流，说明数据已经全部导入成功，会提示“导入成功”，不会自动下载。
返回
}
//如果后台返回一个流，说明有些数据导入失败，那么会自动下载失败数据的excel表。
Let=失败的数据导入. xlsx //自定义下载excel表名
设blob=新Blob([res.data])
设url=window。URL.createObjectURL(blob)
let aLink=document . createelement( a )
aLink.style.display=none
aLink.href=url
//download属性定义下载链接的地址。href属性必须在A标记中指定。
aLink.setAttribute(download ，name)
document . body . appendchild(aLink)
aLink.click()
document . body . remove child(aLink)
窗户。URL.revokeObjectURL(url)
//下载后可以进行其他操作，比如刷新列表，友好提示等。
})
}
方法解析
FormData是ajax2.0(XMLHttpRequest Level2)提出的新接口。通过使用FormData对象，可以将表单元素的名称和值结合起来，实现表单数据的序列化，从而拼接表单元素，提高工作效率。Append向FormData添加新的属性值。如果FormData对应的属性值存在，会覆盖原来的值；否则，将添加新的属性值。
Blob表示不可变的原始数据类文件对象。它的数据可以以文本或二进制格式读取，也可以转换成ReadableStream进行数据操作。
URL.createObjectURL()静态方法创建包含URL的DOMString，该URL表示参数中给定的对象。此URL的生命周期和创建它的窗口中的文档绑定。这个新的URL对象表示指定的文件对象或Blob对象。
URL.revokeObjectURL()静态方法用于释放通过调用URL.createObjectURL()创建的先前存在的URL对象。当您使用完一个URL对象时，您应该调用此方法来让浏览器知道没有必要将对该文件的引用保存在内存中。
总结：上面实现了自定义导入excel表格，自动下载接口返回的流。代码可以直接使用，但是请注意返回的数据响应不一定和我的一样。详见联调接口返回的数据。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。