前端axios下載excel文件(二進(jìn)制)的處理方法

更新時間：2018年07月31日 09:47:00 作者：薛將軍

新接了項目，遇到這樣的需求，通過后端接口下載excel文件，后端沒有文件地址，返回二進(jìn)制流文件。接下來通過實例代碼給大家分享前端axios下載excel文件(二進(jìn)制)的處理方法，一起看看吧

需求：通過后端接口下載excel文件，后端沒有文件地址，返回二進(jìn)制流文件

實現(xiàn)：axios(ajax類似)

主要代碼：

axios：設(shè)置返回數(shù)據(jù)格式為blob或者arraybuffer

如：

  var instance = axios.creat({     ... //一些配置
    responseType: 'blob', //返回數(shù)據(jù)的格式，可選值為arraybuffer,blob,document,json,text,stream，默認(rèn)值為json
  })

請求時的處理：

getExcel().then(res => {
  　　//這里res.data是返回的blob對象   
  　　var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet這里表示xlsx類型
  　　var downloadElement = document.createElement('a');
  　　var href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接
  　　downloadElement.href = href;
  　　downloadElement.download = 'xxx.xlsx'; //下載后文件名
  　　document.body.appendChild(downloadElement);
  　　downloadElement.click(); //點擊下載
  　　document.body.removeChild(downloadElement); //下載完成移除元素
  　　window.URL.revokeObjectURL(href); //釋放掉blob對象 
　})

總結(jié)

以上所述是小編給大家介紹的前端axios下載excel文件(二進(jìn)制)的處理方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

axios
excel

相關(guān)文章

JavaScript的各種常見函數(shù)定義方法
這篇文章主要介紹了JavaScript的各種常見函數(shù)定義方法,包含了一些技巧的測試與分析總結(jié),需要的朋友可以參考下
2014-09-09
js 編程筆記無名函數(shù)
無名函數(shù)，其中一個作用可能是生成新的函數(shù)對象的引用，主要是用于定義。
2011-06-06
JavaScript 垃圾回收機(jī)制分析
同C# 、Java一樣我們可以手工調(diào)用垃圾回收程序，但是由于其消耗大量資源，而且我們手工調(diào)用的不會比瀏覽器判斷的準(zhǔn)確，所以不推薦手工調(diào)用垃圾回收
2013-10-10
js面向?qū)ο笾?、私有、靜態(tài)屬性和方法詳解
這篇文章主要詳細(xì)介紹了js面向?qū)ο笾小⑺接?、靜態(tài)屬性和方法，并附上詳細(xì)的示例，非常的細(xì)致全面，這里推薦給大家，有需要的小伙伴可以參考下
2015-04-04
javascript 7行代碼畫出一個圍棋棋盤
javascript 只有7行代碼即可畫出圍棋棋盤的實現(xiàn)代碼。大家可以看看。
2009-07-07
一次讓你了解全部JavaScript的作用域
這篇文章主要介紹了一次讓你了解全部JavaScript的作用域,作用域決定了變量的生命周期和可見性，變量在作用域范圍之外是不可見的。,需要的朋友可以參考下
2019-06-06
weui上傳多圖片,壓縮,base64編碼的示例代碼
這篇文章主要介紹了weui上傳多圖片,壓縮,base64編碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
JS中URL.createObjectURL使用示例講解
URL.createObjectURL()方法會根據(jù)傳入的參數(shù)創(chuàng)建一個指向該參數(shù)對象的URL. 這個URL的生命僅存在于它被創(chuàng)建的這個文檔里. 新的對象URL指向執(zhí)行的File對象或者是Blob對象,這篇文章主要給大家介紹了關(guān)于JS中URL.createObjectURL使用的相關(guān)資料,需要的朋友可以參考下
2022-03-03
一文搞懂JavaScript中bind,apply,call的實現(xiàn)
bind、call和apply都是Function原型鏈上面的方法，因此不管是使用function聲明的函數(shù)，還是箭頭函數(shù)都可以直接調(diào)用。本文就帶你看看如何實現(xiàn)bind、call和apply
2022-06-06
JavaScript的console命令使用實例
這篇文章主要介紹了javascript的console命令使用實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-12-12