功能插件

功能插件提供文件级别的操作能力：导出、导入、预览。这三个插件由 createEditorHost() 默认安装，可通过选项禁用。

ExportPlugin

注册标识：'export-plugin'

将画布内容导出为 PNG、JPG 或 PDF。

const exportPlugin = host.getPlugin('export-plugin')

// 导出 PNG（触发浏览器下载）
exportPlugin?.exportImage()

// 导出 JPG
exportPlugin?.exportImage('image/jpeg')

// 导出 PNG 并设置背景色
exportPlugin?.exportImage('image/png', '#ffffff')

// 导出 JSON（触发浏览器下载）
exportPlugin?.exportJSON()

// 导出 PDF
exportPlugin?.exportPdf()

导出精度

导出图片的像素比由 pixelRatio 属性控制（默认 2）：

exportPlugin.pixelRatio = 3 // 提高导出清晰度

事件

事件名	触发时机
export:start	导出开始
export:complete	导出完成
export:error	导出失败

ImportPlugin

注册标识：'import-plugin'

从 JSON 文件加载画布内容。

const importPlugin = host.getPlugin('import-plugin')

// 从 JSON 字符串导入（会清空当前画布）
importPlugin?.importJSON(jsonString)

// 弹出文件选择框导入 JSON 文件
importPlugin?.handleImportJSON()

导入会清空画布

importJSON 内部调用 host.loadJSON()，会清空当前画布所有元素再加载新数据。

事件

事件名	触发时机
import:start	导入开始
import:complete	导入完成
import:error	导入失败

PreviewPlugin

注册标识：'preview-plugin'

打开预览窗口，以当前画布内容生成图片并展示。

const previewPlugin = host.getPlugin('preview-plugin')

// 预览（在新窗口打开图片）
previewPlugin?.handlePreview()

// 打印预览（在新窗口打开并调用打印）
previewPlugin?.handlePrintPreview()

事件

事件名	触发时机
preview:start	预览开始
preview:complete	预览完成
preview:error	预览失败

下一步

• 导入与导出 -- 详细的导入导出用法
• 图形插件 -- 7 种图形元素