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

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 = true
  const 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
    })
}