0

在我的应用程序中调用以下函数时，我收到标题中的错误。

  let container = this.myRef.current!;

  DomToImage.toPng(container)
    .then(function (dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);
    })
    .catch(function (error) {
      console.error("something went wrong!", error);
    });
}

我安装了图书馆

npm install dom-to-image

然后运行以下命令以添加将库与 typescript 一起使用所需的类型

npm i --save-dev @types/dom-to-image-more

容器的 console.log 正确输出了我期望的 HTML。

VSCode 中没有显示错误，intellisense 可以找到 DomToImage 和 toPng 的接口

  toSvg(node: Node, options?: Options): Promise<string>;
  toPng(node: Node, options?: Options): Promise<string>;
  toJpeg(node: Node, options?: Options): Promise<string>;
  toBlob(node: Node, options?: Options): Promise<Blob>;
  toPixelData(node: Node, options?: Options): Promise<Uint8ClampedArray>;
}

如果有帮助，这是完整的错误

Summary.tsx:345 Uncaught TypeError: Cannot read properties of undefined (reading 'toPng')
    at Summary.exportToPng (Summary.tsx:345:1)
    at onClick (Summary.tsx:617:1)
    at newProps.onClick (createComponent.tsx:96:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1)
    at executeDispatch (react-dom.development.js:389:1)
    at executeDispatchesInOrder (react-dom.development.js:414:1)
    at executeDispatchesAndRelease (react-dom.development.js:3278:1)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:1)
    at forEachAccumulated (react-dom.development.js:3259:1)
    at runEventsInBatch (react-dom.development.js:3304:1)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514:1)
    at handleTopLevel (react-dom.development.js:3558:1)
    at batchedEventUpdates$1 (react-dom.development.js:21871:1)
    at batchedEventUpdates (react-dom.development.js:795:1)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:1)
    at attemptToDispatchEvent (react-dom.development.js:4267:1)
    at dispatchEvent (react-dom.development.js:4189:1)
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at discreteUpdates$1 (react-dom.development.js:21887:1)
    at discreteUpdates (react-dom.development.js:806:1)
    at dispatchDiscreteEvent (react-dom.development.js:4168:1)

知道我哪里出错了吗？我不明白“ToPng”是如何被定义的。谢谢！

4

0 回答 0