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

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

阅读量：6760 次

发布时间：2019-06-26

本文共 3203 字，大约阅读时间需要 10 分钟。

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中，本项目有置空需求【代码略】，请按需保留

js

import HTTP_API from '@/httpApi' //  封装好的axios:get post请求（含headers和拦截器等【代码略】）// methodsfileExceed () {  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// 导出excellet 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)});