一、涉及的插件
① JSZip:jszip是一个用于创建、读取和编辑.zip文件的JavaScript库
② FileSaver:FileSaver 是一个用于在客户端保存文件的 JavaScript 库。它提供了一种简单的方式来将数据保存为本地文件,通常用于在浏览器中将动态生成的内容(如图像、文档、压缩文件等)保存到用户的计算机上。FileSaver 可以将 Blob 或 File 对象保存为本地文件,支持设置文件名和文件类型,非常适合用于下载动态生成的文件。
二、下载插件
① npm install jszip
② npm install file-saver --save
三、涉及的方法
① JSZip常用的方法
1)file(name, data, options):向 ZIP 文件中添加一个文件,并指定文件名、文件内容和可选的选项。
2)loadAsync(data):从给定的二进制数据中加载一个 ZIP 文件。
3)loadAsync(url, options):从指定 URL 处加载一个 ZIP 文件。
4)folder(name):创建一个文件夹,用于组织文件。
5)generateAsync(options, onUpdate):生成 ZIP 文件,并返回一个 Promise 对象。
6)remove(name):从 ZIP 文件中移除指定的文件或文件夹。
7)file(name, content, options):向 ZIP 文件中添加一个文件。
② file-saver的方法
saveAs : 使用saveAs方法将Blob对象保存在本地计算机中。例如:‘saveAs(blob,'文件名')’
四、主要功能代码
const handleDownSamples = async () => { const zip = new JSZip(); // 获取需要下载的数据 const currentLocalStorageOne = activeTab.value === '1' ? JSON.parse(localStorage.getItem('sampleSelectionSelected') || '[]') : JSON.parse(localStorage.getItem('finalPieceSelected') || '[]'); // 根据 item.albumId 进行从小到大排序 currentLocalStorageOne.sort((a: any, b: any) => a.sort - b.sort); await Promise.all( currentLocalStorageOne.map(async (item: any) => { const res = await fetch(item.albumImage, { mode: 'cors' }); const blob = await res.blob(); const fileName = `${item.sort >= 10 ? item.sort : `0${item.sort}`}.png`; // 将Blob数据添加到ZIP文件中 zip.file(fileName, blob, { binary: true }); }) ); const timestamp = dayjs().format('YYYYMMDDHHmmss'); // 文件名 const filename = `${activeTab.value === '1' ? '选片样图' : '最终成片' }${timestamp}.zip`; zip.generateAsync({ type: 'blob' }).then((content: any) => { // 将Blob数据保存为指定的文件名 FileSaver.saveAs(content, filename); }); };
注:该文档为个人理解所写,有误可建议修改
标签:sort,文件,const,ZIP,压缩,item,blob,vue3,下载 From: https://www.cnblogs.com/persistIn/p/18367690