Exporting scaling/high-rez PDFs from ReactFlow

This past summer I had a heck of a time getting ReactFlow to export as a PFD in the browser, especially in one step - but we got there. BUT! The result relied on rasterizing the content as a PNG - which didn't graphically scale well, and it turned out a lot of our diagrams are extremely big and detailed, so if you can't preserve clarity on zoom in, the game is kind of lost. (And also, they tended to be huuuge files, many Mbs when the corresponding SVG was tiny, like 100K)

Well, I went a little crazy trying to find different methods of getting the export to work. I learned that SVGs are kind of unevenly supported in a lot of ways in browsers and toolkits, and that many tools that will capture DOM stuff and export it as PDF do so by rasterizing it... even if you try to export an SVG, it will turn into a pixel'd mess close up.  Here is a table I made to track my progress and keep track of what permutations I had already done:

(Note, you don't see options for downloading an svg (like from html-to-image toSvg) directly as a link - that's because one absolutely firm requirement was to wrap the reactflow content in a frame, providing metadata about the content (people and place involved, company logo, etc))

So you can see this table almost makes its own little map (maybe I should have used ReactFlow to diagram it out! ) as many of the steps would have to build on previous steps.

#	Method	Result	Notes
A	KendoPDF PDFExport (wrap ReactFlow directly)	PDF w/o Edge lines	(also likely not zoomable)
B	html-to-image toSvg => dataUrl => jsPdf.addImage	Fail	(unsupported image type)
C	html-to-image toPng => dataUrl => jsPdf.addImage	PDF (not zoomable)	(also large file size)
D	html-to-image toSvg => dataUrl	SVG content	intermediate step w/ huge content size)
E	D => download .svg via link	Zoomable .SVG file	not desired goal file type, and large file
F	E => .SVG file to browser print dialog to .PDF	PDF (zoomable)	also good file size… but how to automate
G	E => .SVG file to various online tools and .NET approaches	Fail	(Many pdf/svg wranglers cannot cope with E SVG)
H	D => on-page SVG	SVG content	Intermediate step
I	H => KendoPDF PDFExport	PDF (not zoomable)	(seems like KendoPDF always rasterizes)
J	H => jsPdf w/ svg2pdf .svg()	Fail	Can’t deal with D SVG (but smaller files work)
K	E => >SVG file to svgo optimizer	Fail	“Error: Pseudo-elements are not supported by css-select”
L	H => html2pdf.js	PDF (not zoomable)	renderizes (interestingly is wrapper to html-to-canvas and jsPdf)
M	html-to-image toSvg(of Scaled Flow Elem) => dataUrl	Large PNG, no frame	reverting to Download Image - React Flow for scaling
N	D => new window, button to open up print dialog	Scalable PDF!	manual steps to hit “print” and “print to pdf”

So sadly, there wasn't a perfect end result. The only thing I found that could reliably output a clean PDF was the browser's own "Print" dialog, with its save to pdf action. And that worked a treat in making a tiny PDF that was totally scalable. 

So the solution is a button that does a "print preview" mode (the frame and content) and fires off the print dialog, though we weren't able to automate past that point (adjusting scaling, destination as to PDF and not a printer, etc)