Comments (5)
Hey, thanks for reporting in! Since the error is "uncaught" that indicates nothing is handling/catching it, which is definitely not great! We have a canvas
as part of our examples and that seems to work, but it's very possible we need to do more to ensure everything has loaded.
Would it be possible for you to share a reproducible example on Codesandbox or some other tool so that I can debug this properly?
from react-to-print.
@MatthewHerbst Looks like it has something to do with delayed/asynchronous loading of canvases: https://codesandbox.io/p/sandbox/react-to-print-uncaught-error-83fksn
from react-to-print.
Thanks for the link! Will look to get a fix in this weekend!
from react-to-print.
Finally got a chance to play with this more. Seems that you resolve the onBeforeGetContent
promise before the setState
in LineChart
completes. You're also not waiting for the setLoadCharts
call to complete. Regardless, the reason this crashes with canvas
elements in particular is that we have to do some special handling of canvas
elements. Unlike all other elements, instead of loading the canvas
elements from our internal clone of the content, we instead read them directly off the content. This is because cloneNode
doesn't properly copy canvas
elements which is explicitly called out.
Anyways, you can easily solve this in your code by properly waiting for the setLoadCharts
call and ensuring the LineChart
state effects have actually happened (or, just remove the useEffect
+useState
and render them directly...)
I will be adding a check in with a log message that will ensure we don't hard crash here, and will hopefully help folks determine the issue faster.
Thanks again for reporting this, very interesting and got me into the weeds on some core HTML functions (cloneNode
vs importNode
)
from react-to-print.
Here is a forked version of your sandbox showing how to do it: https://codesandbox.io/p/sandbox/react-to-print-uncaught-error-forked-7l7rpk?file=%2Fsrc%2FApp.tsx%3A11%2C11
from react-to-print.
Related Issues (20)
- getting Supplied Data is not a valid base64-String jsPDF.convertStringToImageData erorr while directly downloading image HOT 1
- Border top and bottom HOT 1
- Save as PDF hangs in print view HOT 1
- Blank PDF when trying to generate in production. HOT 2
- How should i handle large data to print? HOT 8
- Why does it render different content when in im browsing in mobile HOT 4
- Blank Page while printing after a certain period of time HOT 9
- How to add style using PageStyle prop, without it overriding component’s style HOT 5
- Warning: findDOMNode is deprecated outside StrictMode. HOT 13
- HTML doctype declaration is displaying on top of the print dialog window HOT 10
- Print datatables HOT 4
- CSS "break-before" (replacing "page-break-before") not supported HOT 3
- '.brf' file : Change the save directory. HOT 3
- Disable option in browser window to automatically add headers and footers HOT 1
- img tag adds much more to the final PDF size than it should HOT 3
- State changes not effected fist time for print content HOT 9
- Content Overlaps with Footer in Printed Document HOT 3
- Unable to save as pdf logically HOT 2
- "react-to-print" did not receive a `contentRef` HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-to-print.