jszip插件實(shí)現(xiàn)圖片打包下載的方法分析 原創(chuàng)
原創(chuàng) 更新時(shí)間：2023年05月19日 09:15:46 原創(chuàng) 投稿：shichen2014
這篇文章主要介紹了jszip插件實(shí)現(xiàn)圖片打包下載的方法,結(jié)合實(shí)例形式分析了JavaScript使用jszip插件依據(jù)圖片列表打包下載zip壓縮文件的相關(guān)操作技巧,需要的朋友可以參考下
前言
由于后端使用php、node.js、java等進(jìn)行大量的圖片下載操作可能會(huì)導(dǎo)致服務(wù)器負(fù)載過高，所以將圖片下載轉(zhuǎn)移到客戶端是個(gè)不錯(cuò)的選擇，借助 HTML5 中的新特性 Blob 和 URL.createObjectURL API 實(shí)現(xiàn)。
實(shí)現(xiàn)代碼
function download(){
var urls = [
"https://example.com/img1.jpg",
"https://example.com/img2.png"
];
var zip = new JSZip();
var count = 0;
urls.forEach((url, index) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (xhr.status === 200) {
var name = url.substring(url.lastIndexOf("/") + 1);
zip.file(name, xhr.response);
}
count++;
if (count === urls.length) {
zip.generateAsync({type:"blob"}).then(function(content) {
saveAs(content, "pictures.zip");
console.log("下載成功");
});
}
};
xhr.send();
});
}另外，注意：在頁面頂部還需要引入jszip插件
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script> </head>
這樣可以將圖片下載過程從服務(wù)器轉(zhuǎn)移到客戶端，從而減輕服務(wù)器壓力。同時(shí)需要注意的是，在使用客戶端進(jìn)行大量圖片下載時(shí)，也要防止網(wǎng)絡(luò)請求并發(fā)數(shù)量過多導(dǎo)致瀏覽器崩潰。
相關(guān)文章
今天為大家介紹的是JavaScript中的style.display屬性操作實(shí)現(xiàn)代碼與參數(shù)介紹2013-03-03
利用JavaScript將Excel轉(zhuǎn)換為JSON示例代碼
這篇文章主要給大家介紹了關(guān)于利用JavaScript將Excel轉(zhuǎn)換為JSON的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了JS中解決谷歌瀏覽器記住密碼輸入框顏色改變功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了js形成頁面的一種遮罩效果實(shí)例代碼，有需要的朋友可以參考一下2014-01-01
js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法
這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
layui關(guān)閉彈窗后刷新主頁面和當(dāng)前更改項(xiàng)的例子
今天小編就為大家分享一篇layui關(guān)閉彈窗后刷新主頁面和當(dāng)前更改項(xiàng)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript正則表達(dá)式之選擇、分組與引用深度解析
正則表達(dá)式是非常重要的技術(shù),它不僅僅只局限于java語言,不管是任何一種成型的語言,都會(huì)有正則,這篇文章主要介紹了JavaScript正則表達(dá)式之選擇、分組與引用的相關(guān)資料,需要的朋友可以參考下2026-01-01
詳解JavaScript中的Unescape()和String() 函數(shù)
這篇文章主要介紹了詳解JavaScript中的unescape()和String() 函數(shù)，JavaScript unescape() 函數(shù)可對(duì)通過 escape() 編碼的字符串進(jìn)行解碼，String() 函數(shù)把對(duì)象的值轉(zhuǎn)換為字符串，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要為大家詳細(xì)介紹了bootstrap table單元格新增行并編輯的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JavaScript中最簡潔的編碼html字符串的方法,非常非常簡潔的一個(gè)方法,小編親測可用,需要的朋友可以參考下2014-10-10