網頁JS下載多檔案,並改檔名
阿新 • • 發佈:2018-12-26
1、使用加入多個iframe方法,開啟多個連結
function _createIFrame(url, triggerDelay, removeDelay) { setTimeout(() => { let frame = document.createElement('iframe'); frame.style = 'display: none;'; frame.class = 'multi-download'; frame.src = url, document.body.appendChild(frame); setTimeout(function () { document.body.removeChild(frame); }, removeDelay); }) } function _downloadFiles(fileUrls) { const triggerDelay = 100, removeDelay = 1000; fileUrls(v => { this._createIFrame(v.src, k * triggerDelay, removeDelay); }) }
需要瀏覽器同意下載多個檔案。
這個方法無法修改下載檔名,只能使用連結的名字,如果連結沒有檔案格式名,無法修改
2、html5新增了a表現download屬性,強制呼叫下載。
使用Blob物件(二進位制大物件)下載檔案,Blob需要先通過xhr方式下載檔案資料,生成Blob。
URL.createObjectURL可以把Blob物件,轉化成url字串,放入a標籤中。
function handleStartDownload(fileContents) { for (let i = 0; i < fileContents.length; i++) { let a = document.createElement('a'); let blob = fileContents[i].blob; let filename = fileContents[i].filename; /** // 如果檔名有中文,win平臺需要轉成gb2312編碼,否則檔名亂碼 * if ((navigator.platform == "Win32") || (navigator.platform == "Windows")) { return Utf8ToGb2312(filename); } * */ a.download = filename; a.href = window.URL.createObjectURL(blob); a.dispatchEvent(new MouseEvent('click')); } } function handleRequestFile(url, filename) { return new Promise((resolve, reject) => { superagent .get(url) .responseType('blob') /// 輸出blob物件 .end((err, res)=>{ let file = {filename:filename, blob:res.xhr.response, mime:res.type}; resolve(res.status); }) }) } async function downloadFile(fileUrls) { let fileContents = []; for (let i = 0; i < fileUrls.length; i++) { let file = await handleRequestFile(fileUrls[i].url, fileUrls[i].filename); fileContents.push(file); } await handleStartDownload(fileUrls); }
blob方式下載可以修改檔名,最成功的js修改檔名方式。
缺點需要先下載檔案,需要設計下載進度,且無法斷點續傳。