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

梦里梦外; 2022-03-07 03:22 703阅读 0赞

##  **1. 上传 EXCEL**  ##

## Upload组件 [点击跳转到该组件官方文档][Link 1] ##

> ### 用到的upload组件参数 ###

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

> ### 组件代码 ###

## 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()
      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. 结束语**  ##

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

[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/upload
[responseType]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType