dom - Node.CloneNode() 不是一个函数 -dom-to-image.js

Question

我想在其中创建一个 HTML 页面的 .png 文件angularjs并下载它。为此，我目前正在使用dom-to-image.js该domToImage.toBlob函数并将节点元素传递给它。但是在内部，当它运行时会dom-to-image.js引发错误：

node.cloneNode() 不是函数

有人可以在这里帮助我吗？

谢谢

Answer 1

当您尝试调用cloneNode()除单个 DOM 节点之外的任何内容时，会出现此错误。

在这种情况下，错误来自dom-to-image库，它在内部调用该方法。

请注意，如果没有代码片段，很难确定代码的确切问题，但关键是，当您调用 时domtoimage.toBlob()，您需要提供单个 DOM 节点。

所以仔细检查你用什么称呼它。例如，如果您选择 by class，您最终可能会得到多个元素。

最好的做法是精确地确定要转换为 blob 的节点 - 使用id属性，如下所示：

domtoimage.toBlob(document.getElementById('element')).then(...)

element你的目标节点在哪里id。

您也可以选择angular.element()甚至jQuery直接使用。

在这两种情况下，这都会返回一个Object-- 你不能调用cloneNode()它。

另请注意 Angular 文档中的以下内容angular.element()：

注意：AngularJS 中的所有元素引用总是用 jQuery 或 jqLit​​e 包装（例如指令的编译/链接函数中的元素参数）。它们绝不是原始的 DOM 引用。

这意味着您会在两种情况下观察到相同的行为，例如这两种情况：

domtoimage.toBlob($('#element')).then(...)
domtoimage.toBlob(angular.element('#element')).then(...)

会导致您看到的错误。您可以在将其提供给之前对其进行索引，可能是这样的：Objectdomtoimage.toBlob()

domtoimage.toBlob($('#element')[0]).then(...)
domtoimage.toBlob(angular.element('#element')[0]).then(...)

这也可以。

另请查看有关“cloneNode 不是函数”的帖子。