下载图片

此示例展示了如何使用 html-to-image 将流程下载为图片。

🌐 This example shows how to download a flow as an image with html-to-image .

在此示例中使用的 html-to-image 包的 version 已锁定为 1.11.11，这是该包最新可用的 version。在 1.11.11 之后的最近版本无法正确导出图片，并且在 Github 上对此有一个开放的问题。


import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
  Controls,
  Background,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
import DownloadButton from './DownloadButton';
import CustomNode from './CustomNode';
import { initialNodes, initialEdges } from './initialElements';
 
const connectionLineStyle = { stroke: '#ffff' };
const snapGrid = [25, 25];
const nodeTypes = {
  custom: CustomNode,
};
 
const defaultEdgeOptions = {
  animated: true,
  type: 'smoothstep',
};
 
const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
 
const DownloadImageFlow = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      nodeTypes={nodeTypes}
      connectionLineStyle={connectionLineStyle}
      connectionLineType="smoothstep"
      snapToGrid={true}
      snapGrid={snapGrid}
      defaultViewport={defaultViewport}
      fitView
      attributionPosition="bottom-left"
      defaultEdgeOptions={defaultEdgeOptions}
      className="download-image"
    >
      <Controls />
      <Background />
      <DownloadButton />
    </ReactFlow>
  );
};
 
export default DownloadImageFlow;