element-ui上传下载excel（超详细der）

Jeffrrey 发布于2019-08-23 15:10 / 2604人阅读

摘要：上传组件点击跳转到该组件官方文档用到的组件参数参数说明类型可选默认值必选参数，上传的地址上传的文件列表接受上传的文件类型覆盖默认的上传行为最大允许上传个数文件超出个数限制时的钩子

1. 上传 EXCEL Upload组件点击跳转到该组件官方文档

用到的upload组件参数

参数	说明	类型	可选	默认值
action	必选参数，上传的地址	string	---	---
file-list	上传的文件列表	array	---	[]
accept	接受上传的文件类型	string	---	---
http-request	覆盖默认的上传行为	function	---	---
limit	最大允许上传个数	number	---	---
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	---	---

组件代码

html

--说明--
style: 按项目需要添加，请按需保留
action：必需，自定义上传直接给空串；非自定义，将地址赋给action配合属性headers、on-success、on-error等
http-request：自定义方法，根据请求的响应手动实现on-success、on-error
file-list：本项目有清空需要【代码略】
ref：该上传组件放置dialog中，本项目有置空需求【代码略】，请按需保留

import HTTP_API from "@/httpApi" //  封装好的axios:get post请求（含headers和拦截器等【代码略】）

// methods
fileExceed () {
  this.$message.error("别贪心！一次只能上传一个哦~");
},

  // 请求成功
importSuccess (res) {
    // 后端的返回码--上传成功
  if (res.code == xxxxx) {
    // 显示√图标
    let e = document.getElementsByClassName("el-upload-list__item-status-label");
    e[0].setAttribute("style", "display:block !important")
    // 成功提示
    this.$message.success("上传成功");
    // 重新调用列表请求（代码略）
    this.getList();
    // 后端的返回码--上传失败
  } else {
    // 隐藏√图标
    let e = document.getElementsByClassName("el-upload-list__item-status-label");
    e[0].setAttribute("style", "display:none !important")
    // 失败提示--及后端返回的失败详情
    this.$message.error({
      dangerouslyUseHTMLString: true,
      duration: 4500,
      message: res.remark+",
请删除上传失败的文件，修改后重新上传"
    });
  }
},

  // 请求失败
importError (err) {
  this.$message.error({
    dangerouslyUseHTMLString: true,
    duration: 4500,
    message: "上传出现异常，请稍后重试"+",

异常原因："+err
  });
},

  // 自定义上传
uploadFile (item) {
  const form = new FormData()
  form.append("file", item.file)
  HTTP_API.xlsx_upload(form).then(res => {
    this.importSuccess(res)
  }).catch(err => {
    this.importError(err)
  })
}

2. 下载 EXCEL（远程地址/文档流） button组件

组件代码

html

下载模板

js--后端返回下载地址

import axios from "axios"

// methods
// 导出模板
downTemplate () {
  axios({
    method: "get",
    url:"xxx相对地址xxx",
    responseType: "blob"
  }).then(res => this.downloads(res.data, res.headers.filename))
},

// 创建模板下载链接
downloads (data, name){
  if(!data){
    return
  }
  let url = window.URL.createObjectURL(new Blob([data]))
  let link = document.createElement("a")
  link.style.display ="none"
  link.href = url
  link.setAttribute("download", `前端拼接后端返回的名字${name}.xlsx`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
},

js--后端返回文档流

import HTTP_API from "@/httpApi" //  封装好的axios:get post请求（含headers和拦截器等【代码略】）

// methods
// 导出excel
let selectedParams = {
  ids : this.idList.join(",")    //导出条件（按照选中的ID来导出，按实际需求）
}
// 解决文档流乱码问题设置响应类型
HTTP_API.exportSelected(selectedParams, {responseType: "arraybuffer"}).then(res => {
  let url = window.URL.createObjectURL(new Blob([res], {type: "application/vnd.ms-excel;charset=UTF-8"}))
  let link = document.createElement("a")
  link.style.display ="none"
  link.href = url
  link.setAttribute("download", "记录列表.xls")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
});

3. 结束语

上传action必须有，空串也好，随便写点也行，反正得有

element的提示允许html代码，但是要设置dangerouslyUseHTMLString为true

上传的请求成功（状态码200）不等于上传成功，element的√图标，需要用js实现显示隐藏

下载时文件名称为动态时，请求后端协助在响应的头部增加filename字段（filename字段中含文字会有问题，后端给我日期数字，相同的文字部分前端拼接）

responseType设置为blob或者arraybuffer从结果上是一样的。点击跳转responseType文档

专线服务服务器托管超详细教你搭建云免服务器超详细教你搭建云免流服务器上传excel js der

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101618.html

如何在 Laravel 项目中处理 Excel 文件

摘要：本文经授权转自社区说明是一款强大的文件处理扩展包能够快速完成文件的的导出解析等功能本项目由团队成员整理发布首发地为社区文章的项目截图运行代码请见请参照此文档运行文章概览安装基础用法更多功能接下来是详细解说安装使用安装该扩展包安装完成后，本文经授权转自 PHPHub 社区说明 maatwebsite/excel 是一款强大的 Excel 文件处理扩展包, 能够快速完成 Excel 文...

chadLi 2019-06-27 12:12 评论0 收藏0
element-ui 导出excel

摘要：导出项目简介插件使用保存文件电子表格解析器安装使用以示例给定引入插件新增方法错误处理方式新增点击事件浏览器会下载问题导出时间格式转换解决方案 element-ui 导出excel 项目简介 vue + elementUi 插件使用 Project Description file-saver 保存文件 xlsx 电子表格解析器安装 npm install ...

邹强 2019-08-23 13:44 评论0 收藏0
vue导入处理Excel表格功能步骤实例

　　1. 前言　　本篇文章就是为大家讲讲前端导入并处理excel表格的情况，顺便讲讲vue导入并处理excel数据；也总结下使用工具。　　2.vue导入Excel表格　　vue导入Excel表格主要有两种常用的方法，一个是借助ElementUI文件上传进行表格导入，另一个是自带的input做文件上传；以下对两个方法做详细介绍；　　2.1 使用ElementUI中的upload组件　　安装Eleme...

3403771864 2022-11-29 09:16 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0