有這么一個(gè)需求：一個(gè)導(dǎo)入按鈕，點(diǎn)擊按鈕導(dǎo)入excel表，如果excel表中部分?jǐn)?shù)據(jù)導(dǎo)入失敗，則自動(dòng)下載該部分導(dǎo)入失敗數(shù)據(jù)的excel表，如果全部導(dǎo)入成功，則提示“導(dǎo)入成功”。

首先附上ElementUI的上傳文件組件

Element - The world's most popular Vue UI framework

Element，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)

https://element.eleme.cn/#/zh-CN/component/upload

官網(wǎng)詳細(xì)介紹upload組件的屬性和使用方法，就不展開(kāi)了，這里主要通過(guò)使用它實(shí)現(xiàn)開(kāi)篇的導(dǎo)入excel表的需求。（在vue項(xiàng)目中需要引入ElementUI庫(kù)，詳細(xì)步驟請(qǐng)查閱官網(wǎng)）

1、引入ElementUI上傳組件upload

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple
  :auto-upload="false"
  :file-list="fileList"
  :on-change="fileChange">
  <el-button type="primary">導(dǎo)入</el-button>
</el-upload>

頁(yè)面效果

屬性介紹

2、點(diǎn)擊導(dǎo)入按鈕，選擇文件（點(diǎn)擊“打開(kāi)”觸發(fā)on-change）

此時(shí)可以通過(guò)fileChange方法在控制臺(tái)打印查看文件結(jié)構(gòu)

fileChange(file,fileList){
  console.log(file,'file')
  console.log(fileList,'fileList')
}

3、此時(shí)我們已經(jīng)拿到選擇的文件，可以自定義上傳方式，將其發(fā)送至后端服務(wù)器

fileChange(file,fileList){
  console.log(file,'file')
  console.log(fileList,'fileList')
  let url = 'xxx'  //后端服務(wù)器API
  let headers = {
    'Content-Type':'multipart/form-data'   //自定義上傳時(shí)，該請(qǐng)求頭參數(shù)必填
  }
  let formData = ''
  for(let i = 0;i < fileList.length;i++){  //遍歷文件數(shù)組，fileList有可能存在多個(gè)文件
    formData = new FormData()
    formData.append('name',fileList[i].name)
    formData.append('type','.xlsx')
    formData.append('file',fileList[i].raw)
  }
  this.$axios({
    headers: headers,
    method: 'post',
    data: formData,
    url: url,
    responseType:'blob'   //該參數(shù)必填，不然下載下來(lái)的excel表會(huì)提示文件損壞，無(wú)法打開(kāi)
  }).then(res=>{
    if(res && res.data.size == 0){
      //若后臺(tái)不返回流，說(shuō)明全部數(shù)據(jù)導(dǎo)入成功，提示“導(dǎo)入成功”，不自動(dòng)下載
      return
    }
    //如果后臺(tái)返回流，說(shuō)明部分?jǐn)?shù)據(jù)導(dǎo)入失敗，則自動(dòng)下載導(dǎo)入失敗數(shù)據(jù)的excel表
    let name = '導(dǎo)入失敗數(shù)據(jù).xlsx'     //自定義下載excel表名
    let blob = new Blob([res.data])
    let url = window.URL.createObjectURL(blob)
    let aLink = document.createElement('a')
    aLink.style.display = 'none'
    aLink.href = url
    //download 屬性定義了下載鏈接的地址。href 屬性必須在 <a> 標(biāo)簽中指定。
    aLink.setAttribute('download',name) 
    document.body.appendChild(aLink)
    aLink.click()
    document.body.removeChild(aLink)
    window.URL.revokeObjectURL(url)
    //下載結(jié)束之后可以執(zhí)行其他操作，如刷新列表、友好提示等
  })
}

方法解析

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口，利用FormData對(duì)象可以將form表單元素的name與value進(jìn)行組合，實(shí)現(xiàn)表單數(shù)據(jù)的序列化，從而進(jìn)行表單元素的拼接，提高工作效率。append向FormData 中添加新的屬性值，如果FormData 對(duì)應(yīng)的屬性值存在則覆蓋原值，否則新增一項(xiàng)屬性值。

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream來(lái)用于數(shù)據(jù)操作。?

URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString，其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document綁定。這個(gè)新的URL 對(duì)象表示指定的 File對(duì)象或 Blob對(duì)象。

URL.revokeObjectURL() 靜態(tài)方法用來(lái)釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過(guò)調(diào)用這個(gè)方法來(lái)讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。

總結(jié)：以上實(shí)現(xiàn)了自定義導(dǎo)入excel表，且自動(dòng)下載接口返回的流，代碼可以直接使用，但是請(qǐng)注意返回的數(shù)據(jù)response不一定與我的相同，具體看聯(lián)調(diào)接口的返回?cái)?shù)據(jù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論