Html2canvas: 无法使用“display:none”获取 div 的内容

创建于 2016-03-06 · 10评论 · 资料来源: niklasvh/html2canvas

嗨，我想拍摄隐藏的 div 的屏幕截图

这是我试过的代码
HTML：

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

JS：

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

浏览器错误：
**

未捕获的类型错误：无法读取 nullhtml2canvas @ html2canvas.js:941（匿名函数）@ HtmlPage 的属性“长度”。 html:13

**
我的小提琴：https ://jsfiddle.net/h39tp0Ly/2/

这个你能帮我吗

资料来源

Spartan-Arun

最有用的评论

你好，我正在使用 Angular 6 和“html2canvas”来创建一个带有“jsPdf”的 PDF ......

捕获到 id 为“html-pdf”的 div

“HTML”
`学生证/a>

div id = "pdf" *ngIf = "test" style = "text-align: center; margin-top: 5px;">
div id = "html-pdf">

/div
/div`

“js 或 angular 是 Typescript”
`下载2（）{
var imgcab：字符串；
imgcab = this.base64logo.trim();

html2canvas (document.getElementById ('html-pdf'), {scale:2})。然后（功能（画布）{

var img = canvas.toDataURL ("图片/png", 1);

var doc = 新的 jsPDF ({
方向：'p'，
单位：'毫米'，
格式：'信'，
});

doc.addImage (img, 'PNG', 2,2,212,272);
doc.addImage (imgcab, 'JPEG', 5, 5,30,30);
doc.save('testCanvas.pdf');
});`

最重要的是将 div 隐藏在屏幕内。

“CSS”
#pdf { overflow: hidden; height: 0; }

该代码创建了一个 pdf，并捕获了隐藏的 div“pdf”内的 div“html-pdf”...

我希望你为他们服务

我用西班牙语写的，它是从智利翻译过来的；

kuraudeo 于 2018-07-27

👍14 ❤11

所有10条评论

Html2canvas 正确解释display:none样式，因此不会呈现隐藏元素。为了完成你想要的，你绝对可以将一个可见元素放置在页面视口之外（如果需要“渲染隐藏元素”）。

herringtown 于 2016-03-11

可能有用。
谢谢！

atefBB 于 2016-09-27

当且仅当 div 的 css 不是“ display:none ”时它才有效。所以我使用 .show() 和 .hide() 组合使元素可见和隐藏以形成画布

Spartan-Arun 于 2017-01-04

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

我在互联网上找到了一些信息。我们可以使用“ display:none ”将css设置为指定的div，然后像上面一样添加选项onclone。请添加选项“登录：真”看看会发生什么

karsondang 于 2017-01-23

实际上，将容器从具有绝对位置和顶部/左侧负值的视口中取出的技巧 - 在 Firefox 中不起作用，它会引发 NS_ERROR_FAILURE 异常

它在 Chrome 中工作

nettiopsu 于 2018-02-14

我最近遇到了这个问题，如果您希望特定的 div 不可见并截屏，请将 css 属性设置为

height: 0%
overflow:hidden

kchen1025 于 2018-06-07

😕5 👎2 👍2

这对我不起作用@kchen1025

chidiwilliams 于 2018-07-14

我最终在目标 div 之后立即生成画布，然后在画布加载后立即隐藏 div。闪烁几乎不明显。

我的代码如下所示：

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});