分享

Vue导入excel表,导入失败的数据自动下载

天网云 发表于 2022-3-30 09:02:56 [显示全部楼层] 回帖奖励 阅读模式 关闭右栏 0 4689
有那么一个需供:一个导进按钮,面击按钮导进excel表,假如excel表中部分数据导进失利,则主动下载该部分导进失利数据的excel表,假如局部导进胜利,则提醒“导进胜利”。
起首附上ElementUI的上传文件组件
  1. Element - The world's most popular Vue UI framework
  2. Element,一套为开辟者、设想师战产物司理筹办的基于 Vue 2.0 的桌里端组件库
  3. https://element.eleme.cn/#/zh-CN/component/upload
复造代码
民网具体引见
  1. upload
复造代码
组件的属性战利用办法,便没有睁开了,那里次要经由过程利用它完成开篇的导进excel表的需供。(正在vue项目中需求引进
  1. ElementUI
复造代码
库,具体步调请查阅民网)
1、引进ElementUI上传组件upload

  1. <el-upload
  2.   class="upload-demo"
  3.   action="https://jsonplaceholder.typicode.com/posts/"
  4.   multiple
  5.   :auto-upload="false"
  6.   :file-list="fileList"
  7.   :on-change="fileChange">
  8.   <el-button type="primary">导进</el-button>
  9. </el-upload>
复造代码
页里结果
web前端-云社区Vue导入excel表,导入失败的数据自动下载byun.com(1)
                               
登录/注册后可看年夜图

属性引见

              属性             阐明             范例                                         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)          2、面击导进按钮,挑选文件(面击“翻开”触收on-change)

web前端-云社区Vue导入excel表,导入失败的数据自动下载byun.com(2)
                               
登录/注册后可看年夜图

此时能够经由过程
  1. fileChange
复造代码
办法正在掌握台挨印查察文件构造
  1. fileChange(file,fileList){
  2.   console.log(file,'file')
  3.   console.log(fileList,'fileList')
  4. }
复造代码
  1. <img alt="" height="743" src="https://img.jbzj.com/file_images/article/202111/2021112510121111.jpg" width="1200" />
复造代码
3、此时我们曾经拿到挑选的文件,能够自界说上传方法,将其收收至后端效劳器

  1. fileChange(file,fileList){
  2.   console.log(file,'file')
  3.   console.log(fileList,'fileList')
  4.   let url = 'xxx'  //后端效劳器API
  5.   let headers = {
  6.     'Content-Type':'multipart/form-data'   //自界说上传时,该恳求头参数必挖
  7.   }
  8.   let formData = ''
  9.   for(let i = 0;i < fileList.length;i++){  //遍历文件数组,fileList有能够存正在多个文件
  10.     formData = new FormData()
  11.     formData.append('name',fileList[i].name)
  12.     formData.append('type','.xlsx')
  13.     formData.append('file',fileList[i].raw)
  14.   }
  15.   this.$axios({
  16.     headers: headers,
  17.     method: 'post',
  18.     data: formData,
  19.     url: url,
  20.     responseType:'blob'   //该参数必挖,否则下载下去的excel表会提醒文件破坏,没法翻开
  21.   }).then(res=>{
  22.     if(res && res.data.size == 0){
  23.       //若背景没有返回流,阐明局部数据导进胜利,提醒“导进胜利”,没有主动下载
  24.       return
  25.     }
  26.     //假如背景返回流,阐明部门数据导进失利,则主动下载导进失利数据的excel表
  27.     let name = '导进失利数据.xlsx'     //自界说下载excel表名
  28.     let blob = new Blob([res.data])
  29.     let url = window.URL.createObjectURL(blob)
  30.     let aLink = document.createElement('a')
  31.     aLink.style.display = 'none'
  32.     aLink.href = url
  33.     //download 属性界说了下载链接的地点。href 属性必需正在 <a> 标签中指定。
  34.     aLink.setAttribute('download',name)
  35.     document.body.appendChild(aLink)
  36.     aLink.click()
  37.     document.body.removeChild(aLink)
  38.     window.URL.revokeObjectURL(url)
  39.     //下载完毕以后能够施行其他操纵,如革新列表、友爱提醒等
  40.   })
  41. }
复造代码
办法阐发

  1. formData
复造代码
是ajax2.0(XMLHttpRequest Level2)新提出的接心,利用
  1. FormData
复造代码
工具能够将
  1. form
复造代码
表单位素的
  1. name
复造代码
  1. value
复造代码
停止组开,完成表单数据的序列化,从而停止表单位素的拼接,进步事情服从。
  1. append
复造代码
  1. FormData
复造代码
中增加新的属性值,假如
  1. FormData
复造代码
对应的属性值存正在则笼盖本值,不然新删一项属性值。
  1. Blob
复造代码
工具暗示一个不成变、本初数据的类文件工具。它的数据能够按文本或两进造的格局停止读与,也能够转换成
  1. ReadableStream
复造代码
去用于数据操纵。 
  1. URL.createObjectURL()
复造代码
静态办法会创立一个
  1. DOMString
复造代码
,此中包罗一个暗示参数中给出的工具的URL。那个 URL 的性命周期战创立它的窗心中的
  1. document
复造代码
绑定。那个新的URL 工具暗示指定的
  1. File
复造代码
工具或
  1. Blob
复造代码
工具。
  1. URL.revokeObjectURL()
复造代码
静态办法用去开释一个之前曾经存正在的、经由过程挪用
  1. URL.createObjectURL()
复造代码
创立的 URL 工具。当您完毕利用某个 URL 工具以后,该当经由过程挪用那个办法去让阅读器明白不消正在内乱存中担当保留对那个文件的援用了。
总结:以上完成了自界说导进excel表,且主动下载接心返回的流,代码能够间接利用,可是请留意返回的数据
  1. response
复造代码
不肯定取我的不异,详细看联调接心的返回数据。
以上便是本文的局部内乱容,祈望对各人的进修有所协助,也祈望各人多多撑持剧本之家。
                                                         
       以上所述是云社区专客手艺小编经心给各人收拾整顿的本常识相干引见;期望对亲们进修事情提拔有所协助。                                     若有任何疑问、相干分享交换等,可正在本文章底部留行或批评; 欢送IT手艺妙手亦或菜鸟们各持己见、万马齐喑,让云社区成为IT手艺更好的交换进修仄台;   正在此更万分感激各人对云社区专客网站的撑持!                                                                                                                                                                                                                                                                                            
滥觞:云社区转戴;            免责声明:假如进犯了您的权益,请联络站少,我们会实时删除侵权内乱容,感谢协作!
回复

使用道具 举报

没找到任何评论,期待你打破沉寂

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

香港云服务器免费试用