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

最新推荐文章于 2025-04-07 16:02:56 发布

缘飞梦

最新推荐文章于 2025-04-07 16:02:56 发布

阅读量2.1k

点赞数

分类专栏： vue js 文章标签： vue vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_37481512/article/details/121637346

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.user