element-ui上傳下載excel（超詳細der）

1. 上傳 EXCEL

Upload組件 點擊跳轉到該組件官方文檔

用到的upload組件參數

參數	說明	類型	可選	默認值
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()
  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文檔