在Vue项目中导入excel表失败怎么回事,如何处�
Admin 2022-07-13 群英技术资�
有这么一个需求:一个导入按钮,点击按钮导入excel表,如果excel表中部分数据导入失败,则自动下载该部分导入失败数据的excel表,如果全部导入成功,则提示“导入成功”�
首先附上ElementUI的上传文件组�
Element - The world's most popular Vue UI framework
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件�
https://element.eleme.cn/#/zh-CN/component/upload
官网详细介绍upload
组件的属性和使用方法,就不展开了,这里主要通过使用它实现开篇的导入excel表的需求。(在vue项目中需要引�ElementUI
库,详细步骤请查阅官网)
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :auto-upload="false" :file-list="fileList" :on-change="fileChange"> <el-button type="primary">导入</el-button> </el-upload>
页面效果
属� | 说明 | 类型 |
---|---|---|
action | 必选参数,上传的地址 | string |
multiple | 是否支持多选文� | boolean |
auto-upload | 是否在选取文件后立即进行上� | boolean |
auto-upload我们设置为false,避免自动上传,以便使用自定义上传方式� | ||
file-list | 上传的文件列�, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array |
on-change | 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) |
此时可以通过fileChange
方法在控制台打印查看文件结构
fileChange(file,fileList){ console.log(file,'file') console.log(fileList,'fileList') }
fileChange(file,fileList){ console.log(file,'file') console.log(fileList,'fileList') let url = 'xxx' //后端服务器API let headers = { 'Content-Type':'multipart/form-data' //自定义上传时,该请求头参数必� } let formData = '' for(let i = 0;i < fileList.length;i++){ //遍历文件数组,fileList有可能存在多个文� formData = new FormData() formData.append('name',fileList[i].name) formData.append('type','.xlsx') formData.append('file',fileList[i].raw) } this.$axios({ headers: headers, method: 'post', data: formData, url: url, responseType:'blob' //该参数必填,不然下载下来的excel表会提示文件损坏,无法打开 }).then(res=>{ if(res && res.data.size == 0){ //若后台不返回流,说明全部数据导入成功,提示“导入成功”,不自动下� return } //如果后台返回流,说明部分数据导入失败,则自动下载导入失败数据的excel� let name = '导入失败数据.xlsx' //自定义下载excel表名 let blob = new Blob([res.data]) let 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.removeChild(aLink) window.URL.revokeObjectURL(url) //下载结束之后可以执行其他操作,如刷新列表、友好提示等 }) }
formData
是ajax2.0(XMLHttpRequest Level2)新提出的接口,利�FormData
对象可以�form
表单元素�name
�value
进行组合,实现表单数据的序列化,从而进行表单元素的拼接,提高工作效率�append
�FormData
中添加新的属性值,如果FormData
对应的属性值存在则覆盖原值,否则新增一项属性值�
Blob
对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream
来用于数据操作�
URL.createObjectURL()
静态方法会创建一� DOMString
,其中包含一个表示参数中给出的对象的URL。这� URL 的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示指定� File
对象� Blob
对象�
URL.revokeObjectURL()
静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL()
创建� URL 对象。当你结束使用某� URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了�
总结:以上实现了自定义导入excel表,且自动下载接口返回的流,代码可以直接使用,但是请注意返回的数�response
不一定与我的相同,具体看联调接口的返回数据�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
相信绝大多数同学都听过闭包这个概念,但闭包具体是什么估计很少有人能够说的很详细。说实话闭包在我们平时开发中应该是很常见的,并且在前端面试中闭包也是常见的重要考点,在学习闭包之前我们先来看看作用域与作用域链,因为这是闭包的关键�
由于某些限制,vue2不能检测到某些情况下数组的变动,本文就将具体讲解这两种限制的解决思路
这篇文章主要为大家介绍了JavaScript基础之函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
这篇文章主要为大家详细介绍了JavaScript实现雪花飘落效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了面试官:为什么Vue中的v-if和v-for不建议一起用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078