element-ui上传下载excel(超详细der)

2019-02-14 admin

1. 上传 EXCEL

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

html

<el-upload
    style="display: inline; margin-left: 10px;margin-right: 10px;"
    action=""
    :http-request="uploadFile"
    :limit=1
    :on-exceed="fileExceed"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :file-list="uploadList"
    ref="fileupload">
</el-upload>

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

js

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+',<br/>请删除上传失败的文件,修改后重新上传'
    });
  }
},

  // 请求失败
importError (err) {
  this.$message.error({
    dangerouslyUseHTMLString: true,
    duration: 4500,
    message: '上传出现异常,请稍后重试'+',<br/><br/>异常原因:'+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

<el-button type="primary" @click="downTemplate" round>下载模板</el-button>

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()
},

3. 结束语

  1. 上传action必须有,空串也好,随便写点也行,反正得有
  2. element的提示允许html代码,但是要设置dangerouslyUseHTMLString为true
  3. 上传的请求成功(状态码200)不等于上传成功,element的√图标,需要用js实现显示隐藏
  4. 下载时文件名称为动态时,请求后端协助在响应的头部增加filename字段(filename字段中含文字会有问题,后端给我日期数字,相同的文字部分前端拼接)

原文链接:https://segmentfault.com/a/1190000018138991

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53695.html

文章标题:element-ui上传下载excel(超详细der)

相关文章
Easyui Tree获取当前选择节点的所有顶级父节点
只支持四层目录结构,比较笨的一个方法 JS代码 var node = $(&#x27;#tree&#x27;).tree(&#x27;getSelected&#x27;); &#x2F;&#x2F;获取该节点所有父节点 ...
2017-03-17
AngularJS 文件上传控件 ng-file-upload详解
网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://g...
2017-03-10
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
Node.js实现Excel转JSON
一直在做一个关于网上选课的系统,选用了时下比较流行的node.js。今天在想怎么把学生或者老师的信息导入进去,涉及数量比较多一点,我手边又正好有一部分excel的表格。就想把excel转成json然后倒入到mongodb中去。 搜了下网上的...
2017-03-23
五款超实用的开源SVG工具
本文我们将分享5款超实用的开源的SVG工具:   1. SharpVectorGraphics (SVG)   SVG是基于Microsoft .Net开源项目设计而来,是建立在.Net framework上使用SVG的一款应用,支持生成、...
2016-01-13
JavaScript返回网页中超链接数量的方法
本文实例讲述了JavaScript返回网页中超链接数量的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 &lt;!DOCTYPE html&gt; &lt...
2017-03-22
RequireJs的使用详解
一、为什么使用RequireJS?   &lt;script src=&quot;a.js&quot;&gt;&lt;&#x2F;script&gt;   &lt;script src=&quot;b.js&quot;&gt;&lt;&#x...
2017-03-17
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
javascript异步文件上传(兼容IE8+)
在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲...
2017-04-05
Angular ui.bootstrap.pagination分页
本文实例为大家分享了Angular 分页的具体代码,供大家参考,具体内容如下 1、Html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;v...
2017-02-27
回到顶部