更改html2canvas以接受显示为无

Changing html2canvas to accept display as none

本文关键字：显示 html2canvas 更改      更新时间：2023-09-26

我使用的是jsPDF，它使用了html2canvas。这是一个例子。

基于这个答案，我下载了html2canvas，并开始在本地使用它来按照建议进行更改，因为按照其他答案设置颜色的选项对我不起作用。

此外，我注意到我的其他需求与html2canvas默认提供的不同。即使显示器设置为none，我也需要能够生成PDF文件。

请注意，在我给出的示例中，选项HTML Renderer (early stages)不显示任何内容，但实现了较差的渲染。另一方面，我现在使用的addHTML()按原样渲染页面，但这意味着只渲染可见的内容。

这是html2canvas决定将什么视为可见的默认方法。

function isElementVisible(element) {
        return (getCSS(element, 'display') !== "none" &&
                getCSS(element, 'visibility') !== "hidden" &&
                !element.hasAttribute("data-html2canvas-ignore"));
}

我评论了这行：getCSS(element, 'visibility') !== "hidden"，它使我能够创建一个PDF，即使是visibility: hidden。然而，对于display: none来说，即使该方法总是返回true，情况也并非如此。

如何实施？

具有display: none的节点无法为其计算DOMRect，因为它在DOM中没有DOMRect（因为它是display: none）。

如果要渲染display: none内容，则需要在渲染之前将节点的display设置为其他内容。

从html2canvas 0.5.0开始，您可以为html2canvas11提供一个onclone选项，这是一个返回克隆的document对象的回调，您可以在渲染DOM之前根据自己的意愿对其进行修改，而不会影响原始的document。

相关文章：