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

 更新时间:2021年11月25日 10:46:54   作者:前端不释卷leo  
本文详细讲解了Vue导入excel表,导入失败的数据自动下载的方法,文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

有这么一个需求:一个导入按钮,点击按钮导入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库,详细步骤请查阅官网)

1、引入ElementUI上传组件upload

<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)

2、点击导入按钮,选择文件(点击“打开”触发on-change)

此时可以通过fileChange方法在控制台打印查看文件结构

fileChange(file,fileList){
  console.log(file,'file')
  console.log(fileList,'fileList')
}

3、此时我们已经拿到选择的文件,可以自定义上传方式,将其发送至后端服务器

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表单元素的namevalue进行组合,实现表单数据的序列化,从而进行表单元素的拼接,提高工作效率。appendFormData 中添加新的属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream来用于数据操作。 

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document绑定。这个新的URL 对象表示指定的 File对象或 Blob对象。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

总结:以上实现了自定义导入excel表,且自动下载接口返回的流,代码可以直接使用,但是请注意返回的数据response不一定与我的相同,具体看联调接口的返回数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue.js数据绑定操作详解

    vue.js数据绑定操作详解

    这篇文章主要介绍了vue.js数据绑定操作,结合实例形式详细分析了vue.js数据绑定的各种常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-04-04
  • 在Vue中解决跨域问题的常用方式

    在Vue中解决跨域问题的常用方式

    跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下
    2023-10-10
  • Vue3.0的优化总结

    Vue3.0的优化总结

    在本篇文章里小编给大家整理的是一篇关于Vue3.0的优化总结内容,有需要的朋友们可以学习下。
    2020-10-10
  • 详解Vue.js 可拖放文本框组件的使用

    详解Vue.js 可拖放文本框组件的使用

    这篇文章主要介绍了详解Vue.js 可拖放文本框组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue3中使用vuedraggable实现拖拽el-tree数据分组功能

    vue3中使用vuedraggable实现拖拽el-tree数据分组功能

    这篇文章主要介绍了vue3中使用vuedraggable实现拖拽el-tree数据分组功能,可以实现单个拖拽、双击添加、按住ctrl键实现多个添加,或者按住shift键实现范围添加,添加到框中的数据,还能拖拽排序,需要的朋友可以参考下
    2024-02-02
  • 对vue 键盘回车事件的实例讲解

    对vue 键盘回车事件的实例讲解

    今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue之bus总线的简单使用解读

    vue之bus总线的简单使用解读

    这篇文章主要介绍了vue之bus总线的简单使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 关于vue-router路由的传参方式params query

    关于vue-router路由的传参方式params query

    这篇文章主要介绍了关于vue-router路由的传参方式params query,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue动态循环出的多个select出现过的变为disabled(实例代码)

    vue动态循环出的多个select出现过的变为disabled(实例代码)

    本文通过实例代码给大家分享了vue动态循环出的多个select出现过的变为disabled效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-11-11
  • 基于vue+axios+lrz.js微信端图片压缩上传方法

    基于vue+axios+lrz.js微信端图片压缩上传方法

    这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压缩上传方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论