html多节点生成图片并导出zip包

背景

在做项目时遇到一个要将html节点展示的图片列表统一导出为zip包的需求。

难点

1. 将html节点生成图片
2. 将多张图片加入zip包中，然后下载

解决html生成图片问题

参考html截图的思路使用

    pnpm add html-to-image

如何将图片资源生成zip包

pnpm add jszip

完整代码

import { toBlob } from 'html-to-image'
import JSZip from 'jszip'const loading = ref(false)
const cardRef = ref<HTMLElement[]>([])function download() {loading.value = trueconst zip = new JSZip()const tasks: Promise<any>[] = []cardRef.value.forEach((item, index) => {tasks.push(toBlob(item).then((blob) => {return zip.file(`${index + 1}.png`, blob!)}),)})Promise.all(tasks).then(async () => {const content = await zip.generateAsync({ type: 'blob' })downloadMedia(content, '图片包.zip')ElMsgToast.success('导出成功')delayClose(close)}).finally(() => {loading.value = false})
}