處理後端返回的 blob 文件流, 導出文件到本地

exportTableData(params).then(res => {
    const blob = new Blob([res])
    const fileName = '報表.xls'
    const link = document.createElement('a')
    link.download = fileName
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
  })

通過創建一個 a 標籤,並且再去觸發 a 標籤,達到一下導出下載文件的效果。

URL.createObjectURL() 靜態方法會創建一個 DOMString,其中包含一個表示參數中給出的對象的URL。這個 URL 的生命週期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

URL.revokeObjectURL() 靜態方法用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之後,應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。

你可以在 sourceopen 被處理之後的任何時候調用 revokeObjectURL()。這是因爲 createObjectURL() 僅僅意味着將一個媒體元素的 src 屬性關聯到一個 MediaSource 對象上去。調用revokeObjectURL() 使這個潛在的對象回到原來的地方,允許平臺在合適的時機進行垃圾收集。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章