Export a diagram as a PDF file?

[HynekS]

Could someone please provide an example of how to export a reflow diagram as a PDF file? It can be printed with "Save as PDF" selected, and the result is acceptable. However, it seems like there is little control over the layout of the results. My goal is to optimize the fit of the diagram (I'd like to export it on a single page with an optional header).

I've tried react-pdf, but I wasn't able to make it work. I was getting element.setAttribute is not a function; from the error stack output, it happened while react was attempting to render an svg element. I suspect it's because reaflow's <Canvas/> is dependent on a bunch of hooks and react-pdf expects "static" component, but I'm not sure.

There is an example on how to render svg in the react-pdf docs; I was wondering if it was possible to grab the outputted markup (as a ref, or with some native DOM method) and manually map the markup to the <Svg />, <G/>, etc. components? But I haven't tried yet.

Thank you.

[amcdnl]

It should be possible - its just a SVG so its easy to export in that sense.

[HynekS]

Thank you for your quick reply! Yeah, I was thinking it should not be an issue (at least Chrome handles HTML -> PDF conversion natively). I think I've initially misunderstood what react-pdf is supposed to do: It provides a set of components that can be used to create fine-tuned PDFs (with pagination, etc.). I will examine this further.

[achudars]

Thank you for your quick reply! Yeah, I was thinking it should not be an issue (at least Chrome handles HTML -> PDF conversion natively). I think I've initially misunderstood what react-pdf is supposed to do: It provides a set of components that can be used to create fine-tuned PDFs (with pagination, etc.). I will examine this further.

Were you able to figure this out?

[HynekS]

@achudars No, I wasn't :(

[achudars]

@achudars No, I wasn't :(

I also was unsuccessful

my naive approach was something along these lines:

....
const ref = useRef<CanvasRef | null>(null);

const diagram = () => {
    return (
            <Canvas {...props} ref={ref} />
    )
};

return (
    <PDFViewer>
        <Document>
{/* would have been epic if this worked, but this component expects the special "Svg" from react-pdf and not HTML attribute "svg" */}
            {ref.current.svgRef.current}
        </Document>
     </PDFViewer>
);