I mentioned earlier all the heartache we had trying to export ReactFlow diagrams via KendoPDF (short of it was KendoPDF assumed the visual descriptor information for a SVG would be embedded, not external CSS - see this github issue for Kendo after ReactFlow helped me figure out it wasn't going to be solved as a ReactFlow thing.
After investigating other possible paths (ReactFlow talks about doing server side stuff via Puppeteer, and react-pdf was another package I might have started looking at. (We also considered the caveman approach of just firing the browser print dialog and letting the user save as PDF - but even that had terrible scaling problems and wasn't WYSIWYG)) we combined html-to-image package (which is the official recommendation - but be sure to heed the advice of locking in the version to 1.11.11!) with jsPDF. (this meant we had to glue the diagram as a PNG rather than a scalable SVG - jsPDF doesn't handle SVG, maybe for reasons related to KendoPDF's not handling it. SVG is a tricky beast to render, historically..)
One gotcha was this... we had a requirement of wrapping the diagram in a standardized title frame for the PDF - but that frame wasn't there during normal use. With KendoPDF we had a rather neat solution: it added a "k-pdf-export" class, and we could use that to show a frame that was usually hidden but would then show up on export.
With the new solution, it wasn't clear when we could add in that class. My first pass was to do a "preview / export mode" but that wasn't really part of the desired UX... they just wanted the class added on the fly, but that gets tricky with React and DOM rendering cycles. (generating and downloading a snapshot is pretty imperative, so add a class, snapshot, remove class got weird.)
In short, doing a
after each mutation of the classList for the wrapping object seemed to cover it
No comments:
Post a Comment