您好,登錄后才能下訂單哦!
這篇文章主要介紹了JS如何實(shí)現(xiàn)單個(gè)或多個(gè)文件批量下載的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇JS如何實(shí)現(xiàn)單個(gè)或多個(gè)文件批量下載文章都會(huì)有所收獲,下面我們一起來看看吧。
<a href={url} target="_blank">download</a>
window.location.href = url; // 當(dāng)前tab window.open(url); // 新tab
缺點(diǎn):
1.只支持get請求,不支持post請求。
2.瀏覽器會(huì)根據(jù)header
的content-type
來判斷是下載文件還是預(yù)覽文件。
比如 txt
png
等格式文件,會(huì)在當(dāng)前tab或新tab中預(yù)覽,而不是下載下來。
3.由于只支持get,會(huì)有url參數(shù)過長問題。
4.不能加request header
,無法做權(quán)限驗(yàn)證等邏輯。
5.不支持自定義file name。
通過HTML a標(biāo)簽的原生屬性,使用瀏覽器下載。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-download
<a href={url} download={fileName}>download</a>
function downloadFile(url, fileName) { const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); }
優(yōu)點(diǎn):
都是走的瀏覽器下載文件邏輯,不會(huì)預(yù)覽文件。
當(dāng)前tab打開方式下載。
支持設(shè)置file name。
缺點(diǎn):
只支持get請求,不支持post請求。
不能加request header
,無法做權(quán)限驗(yàn)證等邏輯。
不支持跨域地址。
API發(fā)送請求的方式,獲取文件blog
對象,然后通過URL.createObjectURL
方法獲取download url,然后用方案二的<a download />
方式下載。
// 封裝一個(gè)fetch download方法 async function fetchDownload(fetchUrl, method = "POST", body = null) { const response = await window.fetch(fetchUrl, { method, body: body ? JSON.stringify(body) : null, headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); const fileName = getFileName(response); const blob = await response.blob(); const url = URL.createObjectURL(blob); return { blob, url, fileName }; // 返回blob、download url、fileName } // 根據(jù)response header獲取文件名 function getFileName(response) { const disposition = response.headers.get('Content-Disposition'); // 本例格式是:"attachment; filename="img.jpg"" let fileName = disposition.split('filename=')[1].replaceAll('"', ''); // 可以根據(jù)自己的格式來截取文件名 // 參考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition // let fileName = ''; // if (disposition && disposition.indexOf('attachment') !== -1) { // const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition); // fileName = matches?.[1]?.replace(/['"]/g, ''); // } fileName = decodeURIComponent(fileName); return fileName; }
// 頁面里調(diào)用 // get fetchDownload('/api/get/file?name=img.jpg', 'GET').then(({ blob, url, fileName }) => { downloadFile(url, fileName); // 調(diào)用方案二的download方法 }); // post fetchDownload('/api/post/file', 'POST', { name: 'img.jpg' }).then(({ blob, url, fileName }) => { downloadFile(url, fileName); });
URL.createObjectURL
生成的url如果過多會(huì)有效率問題,可以在合適的時(shí)機(jī)(download后)釋放掉。
if (window.URL) { window.URL.revokeObjectURL(url); } else { window.webkitURL.revokeObjectURL(url); }
優(yōu)點(diǎn):
因?yàn)樽詈笥玫氖欠桨付詽M足方案二的優(yōu)點(diǎn)。
支持post請求、支持跨域(fetch本身支持)。
可以加request header
。
缺點(diǎn):
低版本瀏覽器不支持,可以通過'download' in document.createElement('a')
判斷是否支持。
瀏覽器兼容可能有問題,比如Safari、IOS Safari。
有些需求是,點(diǎn)一個(gè)按鈕需要把多個(gè)文件同時(shí)download下來,有以下幾個(gè)方案可以實(shí)現(xiàn)。
downloadFile("/files/file1.txt", "file1.txt"); downloadFile("/files/word1.docx", "word1.docx"); downloadFile("/files/img1.jpg", "img1.jpg");
利用上面的方案二的<a download />
方式下載,會(huì)觸發(fā)瀏覽器是Download multiple files
提示,如果選了Allow
則會(huì)正常下載。
嘗試每個(gè)download之間加延遲,依然會(huì)彈提示。這個(gè)應(yīng)該是瀏覽器機(jī)制問題了,沒辦法避免了。
前端可以通過一個(gè)第三方庫 jszip
,可以把多個(gè)文件以blob、base64或純文本等形式,按自定義的文件結(jié)構(gòu),壓縮成一個(gè)zip文件,然后通過瀏覽器download下來。
官網(wǎng):stuk.github.io/jszip/ 用法不難,直接看code:
// 先封裝一個(gè)方法,請求返回文件blob async function fetchBlob(fetchUrl, method = "POST", body = null) { const response = await window.fetch(fetchUrl, { method, body: body ? JSON.stringify(body) : null, headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); const blob = await response.blob(); return blob; } const zip = new JSZip(); zip.file("Hello.txt", "Hello World\n"); // 支持純文本等 zip.file("img1.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // 支持Promise類型,需要返回?cái)?shù)據(jù)類型是 String, Blob, ArrayBuffer, etc zip.file("img2.jpg", fetchBlob('/api/post/file', 'POST', { name: 'img.jpg' })); // 同樣支持post請求,只要返回類型正確就行 const folder1 = zip.folder("folder01"); // 創(chuàng)建folder folder1.file("img3.jpg", fetchBlob('/api/get/file?name=img.jpg', 'GET')); // folder里創(chuàng)建文件 zip.generateAsync({ type: "blob" }).then(blob => { const url = window.URL.createObjectURL(blob); downloadFile(url, "test.zip"); });
jszip
還支持一些別的類型文件壓縮,比如純文本、base64、binary等等。
由于走的是純前端壓縮,所以會(huì)有延遲問題,走到最后download時(shí)才會(huì)調(diào)起瀏覽器下載,所以頁面可能需要一個(gè)效果來更新壓縮進(jìn)度。zip.generateAsync
方法就支持第二個(gè)參數(shù),支持進(jìn)度更新:
zip.generateAsync({ type: "blob" }, metadata => { const progress = metadata.percent.toFixed(2); // 保留2位小數(shù) console.log(metadata.currentFile, "progress: " + progress + " %"); }).then(blob => ... );
后臺(tái)加個(gè)api,然后把需要download的文件在后臺(tái)壓縮成zip,然后把文件流輸出出來。然后就和單個(gè)文件download一樣了。
因?yàn)楹笈_(tái)會(huì)先壓縮,會(huì)有延遲才會(huì)把blob返回前臺(tái),而且需要傳多個(gè)文件信息,一般是post請求,所以建議使用單個(gè)文件下載的方案三通過API請求實(shí)現(xiàn),在請求前后加上提示語或loading效果。
關(guān)于“JS如何實(shí)現(xiàn)單個(gè)或多個(gè)文件批量下載”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“JS如何實(shí)現(xiàn)單個(gè)或多個(gè)文件批量下載”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。