VUE3+jszip和file-saver如何實現下載多個檔案匯出為一個zip格式

好色的菜狗發表於2024-05-30
VueJS

借鑑大佬寫的文章，他這個是圖片的
https://www.jb51.net/javascript/31723515u.htm

業務場景：
後端會給線上檔案地址，然後根據列表點選批次下載
當前存在問題
會有檔案跨域的情況，這個我試過幾個方案都不行，只能遵循同源政策，放一起

外掛安裝

npm install jszip
npm install file-saver
我遇到的是，下載依賴會失敗
我的解決方案
npm install file-saver --legacy-peer-deps
npm install jszip --legacy-peer-deps

在所需頁面引入　

import JSZip from "jszip";
import FileSaver from "file-saver";

檔案JSON展示

const transferData=ref() 如下資料

[
    {
        "fileName": "pH記錄(pH).xlsx",
        "feilePath": "https://www.baidu.com/mnt/2024/5/9/1788514725233643521.xlsx"
    },
    {
       "fileName": "pH記錄(pH).xlsx",
        "feilePath": "https:///www.baidu.com/mnt/2024/5/9/1788514725233643522.xlsx"
    },
    {
         "fileName": "pH記錄(pH).xlsx",
        "feilePath": "https:///www.baidu.com/mnt/2024/5/9/1788514725359472642.xlsx"
    },
    {
        "fileName": "pH記錄(pH).xlsx",
        "feilePath": "https:///www.baidu.com/mnt/2024/5/9/1788514725359472643.xlsx"
    },
    {
         "fileName": "pH記錄(pH).xlsx",
        "feilePath": "https:///www.baidu.com/mnt/2024/5/9/1788514725367861250.xlsx"
    },
    {
         "fileName": "pH記錄(pH).xlsx",
        "feilePath": "https:///www.baidu.com/mnt/2024/5/9/1788514725372055553.xlsx"
    }
]

程式碼展示

const downloadFiles = async () => {
	// 建立一個新的JSZip例項
	const zip = new JSZip();
	const now = new Date();
	var blogTitle = '全部檔案';
	var promises = [];
	// 假設你有一個檔案列表
	
	// 遍歷檔案列表，下載並新增到ZIP檔案中
	for (const item of transferData.value) {
		if (item.feilePath) {
			const promise = getImgArrayBuffer(item.feilePath).then((data) => {
				// 下載檔案, 並存成ArrayBuffer物件(blob)
				zip.file(item.fileName, data, {binary: true}); // 逐個新增檔案
				cache[item.fileName] = data;
			});
			promises.push(promise);
		} else {
			// feilePath地址不存在時提示
			console.log(`附件${item.fileName}地址錯誤，下載失敗`);
		}
	}

	debounceTimeout = setTimeout(() => {
		zip.generateAsync({type: "blob"}).then((content) => {
			// 生成二進位制流
			FileSaver.saveAs(content, blogTitle); // 利用file-saver儲存檔案  blogTitle:自定義檔名
		});
	}, 100 * transferData.value.length); // 在實際的測試中，Promise會執行壓縮失敗，試過幾次，特別的檔案很多的情況下，然後就用了個很挫的解決方案，反正解決了

}

//檔案以流的形式獲取（引數url為檔案連結地址）
const getImgArrayBuffer = (url) => {
	return new Promise((resolve, reject) => {
		//透過請求獲取檔案blob格式
		let xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET", url, true);
		xmlhttp.responseType = "blob";
		xmlhttp.onload = function () {
			if (xmlhttp.status == 200) {
				resolve(xmlhttp.response);
			} else {
				console.log('下載失敗====', xmlhttp.response)
				reject(xmlhttp.response);
			}
		};
		xmlhttp.send();
	});
}

　　



相關文章