Tuesday, July 15, 2025

problems with kendopdf and reactflow

 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>
  );

No comments:

Post a Comment