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

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

(0)

相关推荐

  • Vue导出Excel功能的全过程记录

    目录 1.前端主导流程: 2. 插件使用及初始化 2.1  借助vue-admin中提供的方法. 2.2  安装插件依赖. 2.3  回调函数内容如下 3.对后台数据进行处理,完成想要的效果 3.1  准备一个数据处理函数(最后会在回调里面使用) 3.2  先处理表头,定义一个对象,目的是待会将表头的英文转成中文 3.3  定义表头 3.4  要处理后台返回数据 3.5   表头处理逻辑 3.6 表格data处理逻辑 3.7 函数返回 3.8 最终完成 总结: 1.前端主导流程: 1.点击页面中

  • Vue实现导入Excel功能步骤详解

    1.前端主导实现步骤 第一步,点击页面上的导入按钮,读入Excel文件 利用插件完成. 第二步,按照后端的要求对数据格式加工,转成他们需要的格式 需要自己写逻辑. 第三步,通过后端接口,将数据通过ajax发回去 调接口,常规操作. 简而言之:前端读excel文件,修改文件格式,调接口 2.实现读入Excel文件 注:此步骤就可实现前端导入功能.如对修改格式有兴趣,可以继续看第三步. 概括:复制代码到自己的文件夹下,下载必需的插件. 2.1 使用的是elementUI提供的vue-admin-el

  • 在Vue里如何把网页的数据导出到Excel的方法

    前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表.员工信息.交易记录.考勤打卡记录-等等需求,本文将对此做探讨. 开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式 ,尤其是导出excel后自定义样式,这在一

  • vue引入Excel表格插件的方法

    本文实例为大家分享了vue引入Excel表格插件的具体代码,供大家参考,具体内容如下 一.安装 npm install handsontable-pro @handsontable-pro/vue npm install handsontable @handsontable/vue 二.引用(在页面引用) import { HotTable } from '@handsontable-pro/vue' import '-/-/node_modules/handsontable-pro/dist/

  • 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/compon

  • vue在table表中悬浮显示数据及右键菜单

    本文实例为大家分享了vue在table表中悬浮显示数据及右键菜单的具体代码,供大家参考,具体内容如下 悬浮显示 这个文档里是存在的,但很容易被忽略,先看看效果图 鼠标放在哪行,就会弹出相对应的描述. 直接看代码 //列名及属性名 <el-table-column prop="member"  label="构件名称"> //从json数据调取     <template slot-scope="scope">     //

  • Python实现葵花8号卫星数据自动下载实例

    目录 一:数据源介绍 二:FTP服务器描述 三: 程序描述 四:注意事项 五:代码 一:数据源介绍 本篇文章介绍的是使用python实现对葵花8号卫星数据进行自动下载. 葵花8号卫星是日本的一颗静止轨道气象卫星,覆盖范围为60S-60N, 80E-160W,除了提供十分钟一幅的原始卫星影像外,还提供了如气溶胶光学厚度(AOT,也叫AOD).叶绿素A.海表温度.云层厚度以及火点等多种产品,这些数据都可以进行下载. 二:FTP服务器描述 首先需要在葵花8官网申请帐号. 可以通过FTP(ftp.ptr

  • C#实现Excel表数据导入Sql Server数据库中的方法

    本文实例讲述了C#实现Excel表数据导入Sql Server数据库中的方法.分享给大家供大家参考,具体如下: Excel表数据导入Sql Server数据库的方法很多,这里只是介绍了其中一种: 1.首先,我们要先在test数据库中新建一个my_test表,该表具有三个字段tid int类型, tname nvarchar类型, tt nvarchar类型 (注意:my_test表中的数据类型必须与Excel中相应字段的类型一致) 2. 我们用SELECT * FROM  OPENROWSET(

  • JavaScript实现excel文件导入导出

    目录 一.需求场景描述 1.此时前端上传解析excel文件可能更合适 2.此时前端下载excel文件可能优雅一些 二.实现思路分析 1.导入excel文件实现思路分析 2.导出excel文件实现思路分析 三.关键代码 1. exportExcel.js 导出excel文件 2. importExcel.js 导入excel文件 四.使用示例 1.使用示例一:上传解析excel 2.使用示例二:下载excel文件 一.需求场景描述 文件的导入导出是非常常见的需求功能,excel文件的导入导出更为常

  • Vue导入excel文件的两种方式(form表单和el-upload)

    目录 前言 第一种方法:form表单 一.文件上传的三要素是什么? 二.具体使用步骤 第二种方法:el-upload 总结 前言 两种导入文件的方法:form表单和el-upload 第一种方法:form表单 一.文件上传的三要素是什么? 文件上传的三要素: 表单post请求 input框的type=file 在form表单中添加enctype=“multipart/form-data” 二.具体使用步骤 代码如下(示例): <form action="/" method=&qu

  • Java中excel表数据的批量导入方法

    本文实例为大家分享了Java中excel表数据的批量导入,供大家参考,具体内容如下 首先看下工具类: import java.awt.Color; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.lang.ref

  • 如何使用vue实现前端导入excel数据

    目录 前言 一.主界面先引入导入组件 二.封装excel-import组件 1.首先是template代码(这里用的是ant vue desgin框架的组件) 2.引入接口 3.js代码methods 三.附加提示(后端也要写的小伙伴可以参考下边建议哈) 四.总结 前言 继前边的vue的导出功能后,自己又去在网上搜了vue导入excel一些文章,自己通过对代码的整理和调整,实现了vue导入excel的功能. 一.主界面先引入导入组件 1.这段主要是中间的那段excel-import标签的那部分代

  • SpringMvc+POI处理excel表数据导入

    一.概念介绍 ApachePOI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能 二.功能相关代码 1.环境说明:JDK1.7+tomcat7+spring 2.配置文件的配置 pom文件中添加POI所需依赖 <!-- 添加POI支持 --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi&l

  • PHP上传Excel文件导入数据到MySQL数据库示例

    最近在做Excel文件导入数据到数据库.网站如果想支持批量插入数据,可以制作一个上传Excel文件,导入里面的数据内容到MySQL数据库的小程序. 要用到的工具: ThinkPHP:轻量级国产PHP开发框架.可在ThinkPHP官网下载. PHPExcel:Office Excel 文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可在CodePlex官网下载.. 1.设计MySQL数据库product 创建product数据库 CREATE DATABASE product D

随机推荐