更改 html2canvas 以接受显示为无答案

【问题标题】：Changing html2canvas to accept display as none更改 html2canvas 以接受显示为无
【发布时间】：2014-12-24 16:44:09
【问题描述】：

我正在使用jsPDF，它使用html2canvas。 Here 就是一个例子。

根据this 的回答，我下载了 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"，即使visibility: hidden，它也使我能够创建 PDF。然而，display: none 并非如此，即使该方法总是返回 TRUE。

如何实现？

【问题讨论】：

标签： javascript html2canvas jspdf

【解决方案1】：

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

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

从 html2canvas 0.5.0 开始，您可以为 html2canvas 提供一个 onclone 选项，这是一个回调，它返回克隆的 document 对象，您可以在其中根据需要在渲染之前修改 DOM，不影响原来的document。

【讨论】：