图片打包压缩下载

图片打包压缩下载

首先获取base64的图片

打包压缩下载

安装插件，执行下面的命令：

npm install jszip file-saver --save

关键代码

      images: [
        { name: 'image1.jpg', content: '/9j/4AAQSkZJRgABAQE...' }, // Base64 图片字符串
        { name: 'image2.png', content: 'iVBORw0KGgoAAAANSUhEUgA...' } // 另一张Base64图片
      ]

	const downloadImagesAsZip = async (arr: any) => {
		const zip = new JSZip();
		arr.forEach((img: any, index: number) => {
			zip.file(img.name, img.content, { base64: true });
		});
		const content = await zip.generateAsync({ type: 'blob' });
		saveAs(content, 'images.zip'); // 自定义ZIP文件名
	};

获取图片

<div class="content" ref="Container">
 <!-- 中间放需要截图的内容 -->
</div>

截图获取base64图片

	const captureAndDownloadAll = async () => {
		if (Container.value) {
			try {
				const canvas = await html2canvas(Container.value);
				const link = document.createElement('a');
				link.href = canvas.toDataURL('image/png');

				return link.href.replace(/^data:image\/(png|jpg);base64,/, '');
			} catch (error) {
				console.error('Error capturing the div content:', error);
			}
		}
	};

当有多个内容区的时候，循环执行获取

	const downloadAll = () => {
		let arr: { name: string; content: Promise<string | undefined> }[] = [];

		chartRefs.value.forEach((element, index) => {
			let p = new Promise((resolve, reject) => {
				resolve({
					name: index + '.png',
					content: element.captureAndDownloadAll(),
				});
			});
			arr.push(p);
		});
		Promise.all(arr).then((res) => {
			downloadImagesAsZip(res);
		});
	};

打包下载

	const downloadImagesAsZip = async (arr: any) => {
		const zip = new JSZip();
		arr.forEach((img: any, index: number) => {
			zip.file(img.name, img.content, { base64: true });
		});
		const content = await zip.generateAsync({ type: 'blob' });
		saveAs(content, 'images.zip'); // 自定义ZIP文件名
	};