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

Question

我想在 angularjs 中创建 HTML 页面的 .png 文件并下载它。为此，我当前使用 dom-to-image.js 并使用 domToImage.toBlob 函数并将节点元素传递给它。但在内部，当它转到 dom-to-image.js 时，它会抛出错误:

node.cloneNode() is not a function

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

谢谢

Answer 1

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

在本例中，错误来自 dom-to-image库，它在内部调用该方法。

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

因此请仔细检查您所调用的内容。例如，如果您按class进行选择，则最终可能会得到多个元素。

最佳实践是精确确定要转换为 blob 的节点 - 使用 id 属性，如下所示:

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

其中 element 是目标节点的 id。

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

在这两种情况下，都会返回一个Object——您不能在其上调用cloneNode()。

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

Note: All element references in AngularJS are always wrapped with jQuery or jqLite (such as the element argument in a directive's compile / link function). They are never raw DOM references.

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

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

会导致您看到的错误。您可以在将 Object 提供给 domtoimage.toBlob() 之前对其进行索引，可能如下所示:

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

这也行。

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