快捷導(dǎo)航

Vue如何實(shí)現(xiàn)從response讀取流下載

更新時(shí)間：2025年04月11日 15:45:09 作者：自不惘

這篇文章主要介紹了Vue如何實(shí)現(xiàn)從response讀取流下載問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue從response讀取流下載

1、創(chuàng)建公共方法

/**
 * 從response讀取流下載
 * @param response 響應(yīng)體
 * @param suffix 文件后綴名
 */
function downloadBlob(response,suffix){

  let fileName = new Date().getTime()+"_"+suffix+'.xlsx'
  let blob = new Blob([response]);//response.data為后端傳的流文件
  let url = window.URL.createObjectURL(blob);
  let downloadElement = document.createElement("a");
  downloadElement.style.display = "none";
  downloadElement.href = url;
  downloadElement.download = fileName;
  document.body.appendChild(downloadElement);
  downloadElement.click();
  document.body.removeChild(downloadElement);
  window.URL.revokeObjectURL(url);
}

export default {
  downloadBlob
}

2、掛載到Vue原型上

import blob from '@/utils/blob'
Vue.prototype.$blob = blob

3、使用

/** 導(dǎo)出按鈕操作 */
    handleExport() {
      this.$confirm('是否導(dǎo)出所有數(shù)據(jù)?', "警告", {
          confirmButtonText: "確定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportData();
        }).then(response => {
          this.$blob.downloadBlob(response,"數(shù)據(jù)表")
        }).catch(()=>{})
    }

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決vue中el-date-picker?type=daterange日期不回顯的問(wèn)題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南
vue中提供了一種混合機(jī)制--mixins,用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
Vue3使用pdfjs-dist實(shí)現(xiàn)PDF文件瀏覽器預(yù)覽功能
本文介紹在Vue3項(xiàng)目中集成pdfjs-dist以實(shí)現(xiàn)PDF預(yù)覽功能的過(guò)程,包括安裝步驟、創(chuàng)建Vue組件、使用方法及注意事項(xiàng),涉及PDF文件來(lái)源、性能優(yōu)化、錯(cuò)誤處理、樣式定制、兼容性等問(wèn)題,并提供了解決方案,需要的朋友可以參考下
2026-03-03
vue路由組件路徑如何用變量形式動(dòng)態(tài)引入
這篇文章主要介紹了vue路由組件路徑如何用變量形式動(dòng)態(tài)引入問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue實(shí)現(xiàn)控制商品數(shù)量組件封裝及使用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)控制商品數(shù)量組件的封裝及使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue-resource:jsonp請(qǐng)求百度搜索的接口示例
今天小編就為大家分享一篇vue-resource:jsonp請(qǐng)求百度搜索的接口示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue element-ul實(shí)現(xiàn)展開(kāi)和收起功能的實(shí)例代碼
這篇文章主要介紹了vue element-ul實(shí)現(xiàn)展開(kāi)和收起功能的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11
基于axios請(qǐng)求封裝的vue應(yīng)用實(shí)例代碼
這篇文章主要給大家介紹了基于axios請(qǐng)求封裝的vue應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Vue下路由History模式打包后頁(yè)面空白的解決方法
這篇文章主要介紹了Vue下路由History模式打包后頁(yè)面空白，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06