It felt like Kendo-React-PDF might be an easy way of exporting stuff made in ReactFlow but weirdly the edges (lines connecting the nodes) don't show. I started with a minimal bit of hello, world for both to show that it wasn't something else that was causing the lines not to show:
run it with
npm init vite my-react-flow-app -- --template react
cd my-react-flow-app
npm install @xyflow/react
npm install @progress/kendo-react-pdf
npm run dev
App.jsx:
import { useState, useCallback, useRef } from "react";
import {
ReactFlow,
applyNodeChanges,
applyEdgeChanges,
addEdge,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import { PDFExport } from "@progress/kendo-react-pdf";
const initialNodes = [
{ id: "n1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
{ id: "n2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
];
const initialEdges = [{ id: "n1-n2", source: "n1", target: "n2" }];
export default function App() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
const pdfExportRef = useRef(null);
const onNodesChange = useCallback(
(changes) =>
setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
[]
);
const onEdgesChange = useCallback(
(changes) =>
setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
[]
);
const onConnect = useCallback(
(params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
[]
);
const exportToPDF = () => {
if (pdfExportRef.current) {
pdfExportRef.current.save();
}
};
return (
<div>
<PDFExport ref={pdfExportRef} fileName={"output.pdf"}>
<div style={{ width: "100vw", height: "80vh" }}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
/>
</div>
<button onClick={exportToPDF}>click me</button>
</PDFExport>
</div>
);
}
