html2canvas渲染Dom问题

已于 2023-09-05 18:46:36 修改
阅读量2.3k 收藏 2
点赞数 2
分类专栏： 前端导出 文章标签： vue 前端 html
于 2020-06-16 14:20:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen548246/article/details/106786312
版权

html2canvas是将dom渲染成canvas，然后生成图片；

在使用过程中，发现触发dom外的iframe的渲染，由于项目中下载文件用iframe，导致会重新下载iframe上面的文件。

查看一些资料，发现虽然只渲染你传的部分dom，但是html2canvas会加载dom外的js 和 css和iframe。

这是个问题呀，要决解，然后就找资料呀，发现html2canvas需要排除渲染的元素，只要在元素上添加属性 data-html2canvas-ignore=’true‘，就可以！

<iframe src="https://xxxxx.doc" data-html2canvas-ignore='true'></iframe>

晨爱衿文
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html2canvas实现将dom生成图片并保存至本地
03-29
使用html2canvas实现图片截图并保存至本地或在页面中以canvas的方式渲染
vue 使用html2canvas将DOM转化为图片
weixin_33831673的博客
09-11 641
一、前言 我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。 注意：版本比较多，这里介绍最新版 二、代码 1. 安装 npm install html2canvas --save 现在最新的版本应该是1.0.0，另外还有一个比较经典...
vue2实现将el-table表格数据导出为长图片
最新发布
qq_39071853的博客
06-04 334
使用canvas的toDataURL方法将画布导出为图片格式（例如PNG）。使用html2canvas库将表格区域转换为画布(canvas)。创建一个图片元素并将其源设置为导出的图片数据。
html2canvas生成图片demo.zip
09-04
html2canvas生成图片的一个小的demo,解决了在当时开发过程中遇到的一些bug，demo内有注释
web前端生成图片 之 html2canvas demo
lanlanmingyue的博客
09-30 380
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Using an existing canvas to draw on</title> <style> canvas { border: 1px solid black; } button .
【前端小技能--html2canvas】告别模糊，将Dom元素生成清晰的图片并分享
球球博客
08-04 920
html2canvas 碰到了一个需求，将阅读的文章生成一张类似海报的形式分享给微信的好友，第一时间想到了canvas，但是如果直接用canvas进行，恐怕要写很多代码了，duck不必，推荐使用：html2canvas，奉上自己的小Demo： demo实现的需求：将指定Dom生成图片，并渲染到准备好的div中，长摁选择保存到本地相册，长摁选择分享给微信好友。 友情提示：长摁是微信自带的功能。 1、基础结构： <div id="capture"> <div>
html2canvas(1.0.0)
02-22
4. **回调函数**：提供onrendered回调函数，当Canvas渲染完成后会触发，开发者可以在此处进行后续操作，比如保存图片或进行图像处理。 三、使用方法 使用html2canvas非常简单，只需要在HTML文档中引入库文件，然后...
html2canvas 1.0.0-rc.5
07-27
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据...
html2Canvas截图加demo
10-29
在"html2Canvas-demo-master"压缩包中的示例代码可以帮助你更好地理解如何配置和调用html2Canvas，以及如何处理可能出现的问题。通过研究这些示例，你可以掌握如何在自己的项目中实现类似的功能，比如创建网页分享...
html2canvas生成图片案例
02-11
值得注意的是，html2canvas并不完美，可能存在一些渲染不准确的情况，例如某些CSS3属性的处理、透明度问题、图片延迟加载等。遇到这些问题时，可能需要查阅官方文档或社区解决方案来优化。 此外，为了处理跨域图片...
vnode2canvas基于Vue插件将虚拟DOM渲染到canvas中
08-10
vnode2canvas - 基于Vue插件将虚拟DOM渲染到canvas中
html5 shadow dom,HTML5 Canvas and the Canvas Shadow DOM
weixin_36036271的博客
06-14 138
HTML5 Canvas and the Canvas Shadow DOM05/11/20155 minutes to readIn this articleThe canvas shadow DOM enables you to provide code behind a canvas element for better user interaction and accessibility....
html2canvas 用法及部分踩坑实录
chunzhenwangluo的博客
11-06 915
什么是 html2canvs? html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。 它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。 html2canvas 可以用来做什么 从上的面的介绍可以知道， html2canvas 的作用就是根据 DOM 生成对应的图片，所以一个比较常见的应用场景就是我们可以使用它在 H5 端生成分享图。 如何使用 html2canvas
html注册登录原理,html2image原理简述
weixin_39653361的博客
06-02 127
前言看到 TJ 大神 star了dom-to-image，也一直很好奇html怎么转 image那么就翻下源码，看下是如何实现的，其实一共就不到800行代码，还蛮容易读懂的工作原理使用svg的一个特性，允许在标签中包含任意的html内容。(主要是 XMLSerializer | MDN这个api将dom转为svg)所以，为了渲染那个dom节点，你需要采取以下步骤：递归 clone 原始的 dom ...
什么是虚拟DOM？
Tqlsecret的博客
06-07 666
虚拟DOM（Virtual DOM）就是普通的js对象，是一个用来描述真实dom结构的js对象，并且最少包含标签名、属性和子元素对象三个属性，不同框架对这三个属性的命名可能会有差别。虚拟DOM是相对于浏览器所渲染出来的真实DOM而言的，创建虚拟DOM就是为了更好地将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一对应。
html2canvas.js的初级使用Demo
sunshu123456的博客
10-31 1893
html2canvas.js的初级使用Demo 直接上代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&amp
html2canvas html dom通过canvas生成图片
alize的博客
12-28 232
http://html2canvas.hertzen.com/
html2canvas库使用中出现的问题及解决方案
热门推荐
kylin_zdd的专栏
09-28 1万+
html2canvas text-shadow 文本阴影 正则
【绘制】HTML5 Canvas 绘制模型：canvas的浏览器渲染过程原理（详细理解和通俗理解）
苏一恒
08-24 2111
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 前提 既然要使用Canvas，那就必须要有个很好的理解才行。想知道如何绘制Canvas图形、图像与文本的，其实需要了解阴影、alp...
html2canvas 动态创建dom 转图片
07-16
最后，html2canvas会将这个DOM元素渲染为一张图片，并返回一个Canvas元素。我们可以将这个Canvas元素插入到页面中，或者将其转换为图片格式进行下载、保存等操作。 需要注意的是，由于html2canvas是基于CanvasAPI...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值