我在应用程序中调用以下函数时收到标题中的错误。
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"怎么可能是未定义的。非常感谢。
我使用带Angular的Ionic。
我导入domToImage:
import domToImage from 'dom-to-image-improved';
然后用的方法进行说明
const domToImageOptions = { bgcolor: 'white', height: this.heightOfDom + 10, width: this.widthOfDom + 10 };
const result = await domToImage.toPng(this.printableArea, domToImageOptions);
结果是一个base64图像