1. 程式人生 > 其它 >vue專案通過Blob物件下載檔案的方法(檔名中文轉成utf-8)

vue專案通過Blob物件下載檔案的方法(檔名中文轉成utf-8)

function exportFile(url, payload) {
const downloadBlob = (data, fileNameS) =>{
if (!data) {
return
}
let blob = new Blob([data])
let fileName = ${fileNameS}
///通過 使用a標籤的download方法下載檔案
if ('download' in document.createElement('a')) {
// 靜態方法會建立一個 DOMString,其中包含一個表示引數中給出的物件的URL。
// 這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件
let url = window.URL.createObjectURL(blob)
let link = document.createElement('a')
link.href = url
link.style.display = 'none'
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link);
// 靜態方法用來釋放一個之前通過呼叫 URL.createObjectURL() 建立的已經存在的 URL 物件。
// 當你結束使用某個 URL 物件時,應該通過呼叫這個方法來讓瀏覽器知道不再需要保持這個檔案的引用了。
window.URL.revokeObjectURL(url)
} else {
window.navigator.msSaveBlob(blob, fileName)
}
}
io.post(url, payload, res => {
// 第二個引數為下載的文明名稱
downloadBlob(res, payload.filename)
}, e => {}, {
responseType: 'blob'
})
}

export {exportFile}

// 頁面的使用
import {exportFile} from 'file'
exportFile (url, {data})