下载图片

此示例展示了如何使用 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 上有一个针对此问题的开放 issue 。

¥The version of the html-to-image package used in this example, has been locked to 1.11.11, which is the latest working version for the package. The recent versions, after 1.11.11, are not exporting images properly and there is open issue for this on 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;