我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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不一定与我的相同,具体看联调接口的返回数据。

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

excel怎么用宏实现自动导入数据

要实现自动导入数据,可以使用宏来执行以下步骤:1. 打开Excel文件,按下"ALT + F11"打开VBA编辑器。2. 在VBA编辑器中,选择你要运行宏的工作簿。3. 在VBA编辑器的"插入"菜单中,选择"模块"。4. 在新建的模块中,编
2023-09-12

Excel数据导入Mysql常见问题汇总:如何处理特殊字符导致导入失败的问题?

Excel数据导入MySQL常见问题汇总:如何处理特殊字符导致导入失败的问题?导入数据到MySQL是一个常见且重要的操作,但在实际操作中,你可能会遇到一些问题。其中之一就是特殊字符导致导入失败的情况。本文将为你介绍一些常见的问题及其解决方法
2023-10-22

Vue3实现动态导入Excel表格数据的方法详解

在开发工作过程中,我们会遇到各种各样的表格数据导入,动态数据导入可以减少人为操作,减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法,需要的可以参考一下
2022-11-16

sqlserver导入数据库失败的原因有哪些

数据库文件损坏:可能是由于数据库文件本身损坏导致导入失败。数据库版本不兼容:导入的数据库文件版本与服务器版本不兼容,导致导入失败。数据库文件过大:如果数据库文件过大,可能会导致导入失败。数据库名称冲突:如果导入的数据库文件中已经存在同名的数
sqlserver导入数据库失败的原因有哪些
2024-04-09

Navicat运行sql文件导入数据不全或导入失败的解决方案

目录前言:解决问题办法:第一:第二:第三:第四: 第五: 第六: 第七: 一、window环境A. 导出.sqlB. 导入.sql二、linux环境A. 导出.sqlB. 导入.sql第八: 总结前言:我们平时想把数据从一个数据库中导入另
2023-03-06

如何在不下载数据的情况下从 Kaggle 导入数据?

问题内容我想将数据从kaggle导入到我的笔记本中,而不必下载它(所以如果我共享我的.ipynb,你只需要运行代码,它就会从互联网下载它),但我不知道是否可能以及要复制哪个链接。这是kaggle网站:https://www.kaggle
如何在不下载数据的情况下从 Kaggle 导入数据?
2024-02-06

dedecms搬家时出现数据库导入失败的解决方法

dedecms网站在搬家的时候,数据库导入常常会出现不成功的情况,并且总是提示dede_purview表有问题,下面就针对这一问题给出解决方法,提供给有需要的朋友参考一下。 表`dede_purview`的结构如下: 复制代码代码如下:CR
2022-06-12

Excel数据导入Mysql常见问题汇总:如何处理数据丢失的情况?

Excel数据导入MySQL常见问题汇总:如何处理数据丢失的情况?在将Excel表格中的数据导入到MySQL数据库时,经常会遇到数据丢失的情况。这可能是由于数据格式不匹配、导入程序错误或其他原因导致的。下面将介绍一些处理数据丢失情况的常见问
2023-10-22

Java技术:实现pdf和Excel的生成及数据动态插入、导出

本篇带给大家关于Java技术,实现pdf和Excel的生成及数据动态插入、导出,希望对你有所帮助!

Java怎么实现pdf和Excel的生成及数据动态插入与导出

这篇文章主要介绍“Java怎么实现pdf和Excel的生成及数据动态插入与导出”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java怎么实现pdf和Excel的生成及数据动态插入与导出”文章能帮助大
2023-06-27

Python导入Excel表格数据并以字典dict格式保存的操作方法

本文介绍基于Python语言,将一个Excel表格文件中的数据导入到Python中,并将其通过字典格式来存储的方法,感兴趣的朋友一起看看吧
2023-01-28

编程热搜

目录