FlowGram.AI
  • 简体中文

      • @flowgram.ai/export-plugin

      npm
      npm install @flowgram.ai/export-plugin

      导出插件提供了将工作流导出为图片（PNG、JPEG、SVG）或数据文件（JSON、YAML）的功能。

      快速开始

      1. 安装
      npm
      yarn
      pnpm
      bun
      deno
      npm install @flowgram.ai/export-plugin
      1. 注册插件
      import { createDownloadPlugin } from '@flowgram.ai/export-plugin';

const editorProps = useMemo(() => ({
  plugins: () => [createDownloadPlugin({})]
}), []);

return (
  <FreeLayoutEditorProvider {...editorProps}>
    <EditorRenderer />
  </FreeLayoutEditorProvider>
)

      配置项

      createDownloadPlugin({
  // 自定义导出文件名
  // 默认: `flowgram-${nanoid(5)}.${format}`
  getFilename: (format) => `my-workflow.${format}`,

  // 导出图片时添加的水印 SVG
  // 水印会显示在图片右下角
  watermarkSVG: '<svg>...</svg>',
})

      支持的导出格式

      import { FlowDownloadFormat } from '@flowgram.ai/export-plugin'

// 图片格式
FlowDownloadFormat.PNG   // PNG 图片
FlowDownloadFormat.JPEG  // JPEG 图片
FlowDownloadFormat.SVG   // SVG 矢量图

// 数据格式
FlowDownloadFormat.JSON  // JSON 数据
FlowDownloadFormat.YAML  // YAML 数据

      使用 FlowDownloadService

      在组件中使用 FlowDownloadService 来触发导出：

      import { useService } from '@flowgram.ai/free-layout-editor';
import { FlowDownloadService, FlowDownloadFormat } from '@flowgram.ai/export-plugin';

export const ExportButton = () => {
  const downloadService = useService(FlowDownloadService);

  const handleExportPNG = async () => {
    await downloadService.download({ format: FlowDownloadFormat.PNG });
  };

  const handleExportJSON = async () => {
    await downloadService.download({ format: FlowDownloadFormat.JSON });
  };

  return (
    <div>
      <button onClick={handleExportPNG} disabled={downloadService.downloading}>
        导出 PNG
      </button>
      <button onClick={handleExportJSON} disabled={downloadService.downloading}>
        导出 JSON
      </button>
    </div>
  );
};

      监听下载状态

      import { useEffect, useState } from 'react';
import { useService } from '@flowgram.ai/free-layout-editor';
import { FlowDownloadService } from '@flowgram.ai/export-plugin';

export const DownloadStatus = () => {
  const downloadService = useService(FlowDownloadService);
  const [downloading, setDownloading] = useState(false);

  useEffect(() => {
    const disposer = downloadService.onDownloadingChange((value) => {
      setDownloading(value);
    });
    return () => disposer.dispose();
  }, [downloadService]);

  return downloading ? <span>正在导出...</span> : null;
};

      类型定义

      import { FlowDownloadFormat } from '@flowgram.ai/export-plugin';

interface DownloadServiceOptions {
  // 自定义导出文件名的函数
  getFilename?: (format: FlowDownloadFormat) => string;

  // 导出图片时的水印 SVG 字符串
  watermarkSVG?: string;
}

interface WorkflowDownloadParams {
  // 导出格式
  format: FlowDownloadFormat;
}

enum FlowDownloadFormat {
  JSON = 'json',
  YAML = 'yaml',
  PNG = 'png',
  JPEG = 'jpeg',
  SVG = 'svg',
}