欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄

 更新時(shí)間:2022年07月29日 10:03:07   作者:_啞巴湖大水怪_  
最近遇到了需求,覺著有必要給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于一次在vue中使用post進(jìn)行excel表下載的實(shí)戰(zhàn)記錄,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、一般大家下載excel都是使用get方法,直接點(diǎn)擊下載

就像這樣,我就不多說了,大家應(yīng)該都可以的啦 ??‍♀?

 <!-- 導(dǎo)出提示框 -->
    <Modal
      title="導(dǎo)出"
      :show.sync="exportVisible"
      :showfooter="false"
      @close="closeExportFiles"
    >
      <exportFiles
        ref="exportFilesDom"
        :model="exportForm"
        export-url="導(dǎo)出鏈接"
      />
    </Modal>

二、vue用post下載excel表

這次因?yàn)閷?dǎo)出的excel文件表頭有點(diǎn)復(fù)雜,后端弄了很久并且是個(gè)post請(qǐng)求,我就自己也重新寫的

后端發(fā)來的下載的話是文件流,獲取到的數(shù)據(jù)是亂碼,需要轉(zhuǎn)blob然后進(jìn)行下載,下載的話就是使用普遍的在網(wǎng)頁上創(chuàng)建一個(gè) a 鏈接,然后掛載上 a 鏈接這樣的方法,點(diǎn)擊下載

三、下面是具體的實(shí)現(xiàn)

3.1 post的封裝

將請(qǐng)求方法封裝了一下,因?yàn)橐郧暗姆椒ǘ荚谂袛囗憫?yīng)的 code 等于200,我前期做的時(shí)候請(qǐng)求一直再走 catch 里面,我萌了很久,我太菜了,最后發(fā)現(xiàn)返回的是亂碼,沒有返回code什么的,所以在axios的響應(yīng)函數(shù)里面一直在走 Promise.reject(),就走catch里面,所以封裝了下面的方法

// 文件下載導(dǎo)出
http.exportExcel = (url,data,config) => {
  return instance.post(url,data,config).then(res => {
        return res
  })
}

url:請(qǐng)求地址

data:請(qǐng)求參數(shù) 3.config:請(qǐng)求時(shí)轉(zhuǎn)為blob,所以需要設(shè)置 responseType:'blob'

3.2 請(qǐng)求的方法

主要代碼解釋都放在下面的注釋中了,就不再重新解釋了,主要是設(shè)置請(qǐng)求頭中的 responseType:'blob'

async reportExport(type){
        // console.log(this.multipleSelection)
        this.type = type
        if(type === 2 ){
          if(this.multipleSelection.length<=0){
            return this.$message.error('請(qǐng)先選擇要導(dǎo)出的數(shù)據(jù)')
          }
        }
        let ids = []
        for(let obj of this.multipleSelection){
            ids.push(obj.id)
        }
        let form1 = {
              type:type,
              ids:ids,
              date:this.dayTime,          
              }
        let infoMessage =  this.$message.info('請(qǐng)稍后正在導(dǎo)出中') // 這個(gè)是拿到element中this.$message的實(shí)力對(duì)象,后面調(diào)用close關(guān)閉
       try {
       // responseType:'blob' 重點(diǎn),設(shè)置將后端傳回的數(shù)據(jù)進(jìn)行blob轉(zhuǎn)化,不然亂碼
          const data = await this.$http.exportExcel('請(qǐng)求的url',form1,{responseType:'blob'})
          this.download(data) // 導(dǎo)出excel,這個(gè)方法下面會(huì)有解釋
          infoMessage.close() // 關(guān)閉上方的提示信息,不然兩個(gè)提示信息會(huì)同時(shí)出現(xiàn)
          this.$message.success('導(dǎo)出成功')
      } catch (error) {
        console.log(error)
      } 
    },

3.3 download下載方法的封裝

// 下載文件
    download (data) {
        if (!data) {
            return
        }
        window.URL = window.URL || window.webkitURL // 兼容性
        // 創(chuàng)建一個(gè) URL 這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象。
        let url = window.URL.createObjectURL(new Blob([data])) 
        let link = document.createElement('a') // 創(chuàng)建一個(gè)a元素
        link.style.display = 'none' // 讓a元素在頁面中隱藏
        link.href = url // 綁定 a 元素的 href 為當(dāng)前的url
        let exportName = this.type == 1 ? this.dayTime : this.belongMonth
        link.setAttribute('download', `${exportName}.xlsx`) // 設(shè)置 a 元素 download屬性,屬性名為后面的值 
        document.body.appendChild(link) // 添加到頁面中
        link.click() // 點(diǎn)擊a元素 下載excel文件
        window.URL.revokeObjectURL(url) //卸載url,釋放內(nèi)存
    },

1.window.webkitURL是[webkit]內(nèi)核的實(shí)現(xiàn)(一般手機(jī)上就是使用這個(gè)),window.webkitURL和window.URL是一樣的,window.URL是標(biāo)準(zhǔn)定義,所以做一個(gè)兼容

2.標(biāo)簽變量名.setAttribute("屬性名","屬性值");害怕大家寫多了框架,忘了這些哈哈哈哈

四、總結(jié)

在使用post請(qǐng)求,后端返回的data為亂碼時(shí),不能判斷 返回?cái)?shù)據(jù)的 code==200,然后就是需要在請(qǐng)求頭里面的 responseType:'blob',就OK啦。

到此這篇關(guān)于一次在vue中使用post進(jìn)行excel表下載的文章就介紹到這了,更多相關(guān)vue用post下載excel表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Element中Slider滑塊的具體使用

    Element中Slider滑塊的具體使用

    這篇文章主要介紹了Element中Slider滑塊的具體使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼

    Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼

    這篇文章主要介紹了Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例

    Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例

    下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 使用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue【推薦】

    使用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue【推薦】

    Proxy 用于修改某些操作的默認(rèn)行為,等同于在語言層面做出修改,所以屬于一種“元編程”。這篇文章主要介紹了用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue,需要的朋友可以參考下
    2018-06-06
  • vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝

    vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝

    這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 使用vue ant design分頁以及表格分頁改為中文問題

    使用vue ant design分頁以及表格分頁改為中文問題

    這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。
    2023-04-04
  • 使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)

    使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)

    這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案

    快速解決Error: error:0308010C:digital envelope ro

    因?yàn)?nbsp;node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對(duì)允許算法和密鑰大小增加了嚴(yán)格的限制,下面通過本文給大家分享快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案,感興趣的朋友一起看看吧
    2024-02-02
  • vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明

    vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明

    這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue cli實(shí)現(xiàn)項(xiàng)目登陸頁面流程詳解

    vue cli實(shí)現(xiàn)項(xiàng)目登陸頁面流程詳解

    CLI是一個(gè)全局安裝的npm包,提供了終端里的vue命令。它可以通過vue create快速搭建一個(gè)新項(xiàng)目,或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項(xiàng)目
    2022-10-10

最新評(píng)論