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})
}