dom - Node.CloneNode() 不是一个函数 -dom-to-image.js
问题描述
我想在其中创建一个 HTML 页面的 .png 文件angularjs
并下载它。为此,我目前正在使用dom-to-image.js
该domToImage.toBlob
函数并将节点元素传递给它。但是在内部,当它运行时会dom-to-image.js
引发错误:
node.cloneNode() 不是函数
有人可以在这里帮助我吗?
谢谢
解决方案
当您尝试调用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 或 jqLite 包装(例如指令的编译/链接函数中的元素参数)。它们绝不是原始的 DOM 引用。
这意味着您会在两种情况下观察到相同的行为,例如这两种情况:
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(...)
这也可以。
另请查看有关“cloneNode 不是函数”的帖子。
推荐阅读
- php - 使用php重新排序数组中的元素
- pygame - 'tuple' 和 'int' 的实例之间不支持 '>='
- jquery - jquery clone 和 removebycontent ...不是函数吗?
- jquery - 当 Select2 中仅提供文本的 .val() 时,预选多个完整(文本)
- swift - 是否可以使用 Swift 部署智能合约?
- spring-boot - 无法在 Mockito 中监视限定符 bean
- laravel - 分组行不包括在案例中使用的列
- flutter - Flutter 冻结数据与模型数据冲突
- ruby-on-rails - Rails 水平分片在测试环境中未连接
- delphi - Delphi Spinedit:获取上一个值