在vue框架中,與傳統的根據路徑下載文件(document.getElementById("").src=‘’)方式不同,有時候,我們會需要將上傳的文件在后台直接進行處理再回傳到前端,這種情況下文件沒有實際的可獲取的路徑,無法通過鏈接方式下載。但是可以通過將其轉成blob對象,添加到iframe標簽中來模擬下載(或者pdf預覽)。具體的接收方式如下
1.首先設置responseType對象格式為 blob:
responseType:'blob'
2.獲取請求返回的response對象中的blob
var blob=response.body
3.創建一個臨時的url指向blob對象
#URL.createObjectURL()方法會根據傳入的參數創建一個指向該參數對象的URL. 這個URL的生命僅存在於它被創建的這個文檔里. 新的對象URL指向執行的File對象或者是Blob對象.
var url = window.URL.createObjectURL(blob);
#設置文件類型,這里以excel為例
blob.type = "application/excel";
#創建url之后可以模擬對此文件對象的一系列操作,例如:預覽、下載
var a = document.createElement('a');
a.href = url;
a.download = 'test.xlsx';
a.click();
4.釋放這個臨時的對象url
window.URL.revokeObjectURL(url);
#URL.revokeObjectURL()方法會釋放一個通過URL.createObjectURL()創建的對象URL. 當你要已經用過了這個對象URL,然后要讓瀏覽器知道這個URL已經不再需要指向對應的文件的時候,就需要調用這個方法.