将html页面转成png图片，并打包成.zip压缩包

将html页面转成png图片，并打包成.zip压缩包

搞一个工具函数

import domtoimage from 'dom-to-image-more';
import JSZip from 'jszip';

export const packDomImg = async (domElements: HTMLElement[]) => {
  const zip = new JSZip();
  const promises: any = [];

  domElements.forEach((element, index) => {
    const promise = domtoimage
      .toPng(element, { scale: 15 })
      .then((dataUrl: any) => {
        // 获取模块名称 没有就取下标值
        const moduleName = element.getAttribute('title') || index + 1;
        zip.file(`${moduleName}.png`, dataUrl.split('base64,')[1], {
          base64: true,
        });
      });
    promises.push(promise);
  });

  // 等待所有转换操作完成
  await Promise.all(promises)
    .then(() => {
      // 生成 Zip 文件
      return zip.generateAsync({ type: 'blob' });
    })
    .then((blob) => {
      // 创建一个下载链接
      const downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(blob);
      downloadLink.download = 'group_overview_images.zip';
      downloadLink.click();
    })
    .catch((error) => {
      // 处理错误
      console.error('转换和下载过程中出现错误：', error);
    });
};

下载操作

思路就是document.querySelectorAll 获取页面上下载模块的class，然后循环转化成png 最后打包zip

<template>
	<div class="export-box" title=''模块一">模块一</div>
	<div class="export-box" title=''模块二">模块二</div>
	<div class="export-box" title=''模块三">模块三</div>
	<div class="export-box" title=''模块四">模块四</div>
</template>

// 正常是将上面的封装成一个公共的盒子
 <template>
	 <common-box 
	 :title="模块一"
	 />
 </template>

<script setup lang="ts">
  import { packDomImg } from '@/utils/domToPng';

  let downLoading = ref(false);

  /**
   *点击下载图片按钮
   */
  const downloadImg = () => {
    downLoading.value = true;
    const imgDom: any = document.querySelectorAll('.export-box');
    packDomImg(imgDom).finally(() => {
      downLoading.value = false;
    });
  };
</script>