vue 中使用htmlcanvas生成多张图片，并转成压缩包，并下载到本地

最新推荐文章于 2025-09-19 05:14:13 发布

原创

最新推荐文章于 2025-09-19 05:14:13 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端

本文介绍如何在Vue项目中利用htmlcanvas将页面元素转化为图片，并将多张图片组合成压缩包进行本地下载。重点在于处理http链接的图片，以及使用js实现图片的转换和打包功能。

1、页面引入

import html2canvas from 'html2canvas'
import JSZip from "jszip";
import FileSaver from "file-saver";

2、html代码（必须要注意的是，图片如果是http链接的时候，要单独处理，文件路径后需要加+'?any_string_is_ok'）



      <div :class="'imageWrapper'+index" v-for="(item,index) in allDataUrl" 
         :key="index" class="warpBoxs rel">
          <div class="personInfos flex " style="justify-content: space-between;">
            <!-- 左边个人信息-->
            <div>
              <div class="flex persNames fon_16">
                <span class="pers_names">姓名:{
  
  { item.userDTO.user.realName }}</span>
                <span style="color: #827042">ID:{
  
  { item.userDTO.userExtra.userNo }}</span>
              </div>
            </div>
            <!-- 右边照片-->
            <div style="width: 64px;height: 90px;margin-top: 3