element-ui上傳下載excel（超詳細(xì)der）

Jeffrrey 發(fā)布于2019-08-23 15:10 / 2809人閱讀

摘要：上傳組件點(diǎn)擊跳轉(zhuǎn)到該組件官方文檔用到的組件參數(shù)參數(shù)說明類型可選默認(rèn)值必選參數(shù)，上傳的地址上傳的文件列表接受上傳的文件類型覆蓋默認(rèn)的上傳行為最大允許上傳個(gè)數(shù)文件超出個(gè)數(shù)限制時(shí)的鉤子

1. 上傳 EXCEL Upload組件點(diǎn)擊跳轉(zhuǎn)到該組件官方文檔

用到的upload組件參數(shù)

參數(shù)	說明	類型	可選	默認(rèn)值
action	必選參數(shù)，上傳的地址	string	---	---
file-list	上傳的文件列表	array	---	[]
accept	接受上傳的文件類型	string	---	---
http-request	覆蓋默認(rèn)的上傳行為	function	---	---
limit	最大允許上傳個(gè)數(shù)	number	---	---
on-exceed	文件超出個(gè)數(shù)限制時(shí)的鉤子	function(files, fileList)	---	---

組件代碼

html

--說明--
style: 按項(xiàng)目需要添加，請(qǐng)按需保留
action：必需，自定義上傳直接給空串；非自定義，將地址賦給action配合屬性headers、on-success、on-error等
http-request：自定義方法，根據(jù)請(qǐng)求的響應(yīng)手動(dòng)實(shí)現(xiàn)on-success、on-error
file-list：本項(xiàng)目有清空需要【代碼略】
ref：該上傳組件放置dialog中，本項(xiàng)目有置空需求【代碼略】，請(qǐng)按需保留

import HTTP_API from "@/httpApi" //  封裝好的axios:get post請(qǐng)求（含headers和攔截器等【代碼略】）

// methods
fileExceed () {
  this.$message.error("別貪心！一次只能上傳一個(gè)哦~");
},

  // 請(qǐng)求成功
importSuccess (res) {
    // 后端的返回碼--上傳成功
  if (res.code == xxxxx) {
    // 顯示√圖標(biāo)
    let e = document.getElementsByClassName("el-upload-list__item-status-label");
    e[0].setAttribute("style", "display:block !important")
    // 成功提示
    this.$message.success("上傳成功");
    // 重新調(diào)用列表請(qǐng)求（代碼略）
    this.getList();
    // 后端的返回碼--上傳失敗
  } else {
    // 隱藏√圖標(biāo)
    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+",
請(qǐng)刪除上傳失敗的文件，修改后重新上傳"
    });
  }
},

  // 請(qǐng)求失敗
importError (err) {
  this.$message.error({
    dangerouslyUseHTMLString: true,
    duration: 4500,
    message: "上傳出現(xiàn)異常，請(qǐng)稍后重試"+",

異常原因："+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（遠(yuǎn)程地址/文檔流） button組件

組件代碼

html

下載模板

js--后端返回下載地址

import axios from "axios"

// methods
// 導(dǎo)出模板
downTemplate () {
  axios({
    method: "get",
    url:"xxx相對(duì)地址xxx",
    responseType: "blob"
  }).then(res => this.downloads(res.data, res.headers.filename))
},

// 創(chuàng)建模板下載鏈接
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請(qǐng)求（含headers和攔截器等【代碼略】）

// methods
// 導(dǎo)出excel
let selectedParams = {
  ids : this.idList.join(",")    //導(dǎo)出條件（按照選中的ID來導(dǎo)出，按實(shí)際需求）
}
// 解決文檔流亂碼問題設(shè)置響應(yīng)類型
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. 結(jié)束語

上傳action必須有，空串也好，隨便寫點(diǎn)也行，反正得有

element的提示允許html代碼，但是要設(shè)置dangerouslyUseHTMLString為true

上傳的請(qǐng)求成功（狀態(tài)碼200）不等于上傳成功，element的√圖標(biāo)，需要用js實(shí)現(xiàn)顯示隱藏

下載時(shí)文件名稱為動(dòng)態(tài)時(shí)，請(qǐng)求后端協(xié)助在響應(yīng)的頭部增加filename字段（filename字段中含文字會(huì)有問題，后端給我日期數(shù)字，相同的文字部分前端拼接）

responseType設(shè)置為blob或者arraybuffer從結(jié)果上是一樣的。點(diǎn)擊跳轉(zhuǎn)responseType文檔