导入与导出

createEditorHost() 默认安装 ExportPlugin、ImportPlugin 和 PreviewPlugin。如需禁用，可传入 { exportPlugin: false, importPlugin: false }。

导出 JSON

ExportPlugin.exportJSON() 将画布内容序列化为 JSON 并触发浏览器下载：

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

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

JSON 数据结构为：

{
  "state": {
    "zoom": 1,
    "currentTool": "select",
    "snapToGrid": true,
    "showGrid": false,
    "width": 400,
    "height": 400,
    "wmm": 50,
    "hmm": 50,
    "dpm": 8
  },
  "elements": [
    { "type": "rect", "id": "...", "xmm": 5, "ymm": 5, "wmm": 30, "hmm": 30, ... }
  ]
}

如需获取 JSON 字符串而不触发下载，可直接调用 host.toJSON()。

导出图片

// 导出 PNG（默认）
exportPlugin?.exportImage()

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

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

导出图片的精度由 ExportPlugin 的 pixelRatio 属性控制（默认 2）：

// 修改导出像素比（值越大越清晰）
exportPlugin.pixelRatio = 3

pixelRatio 选择

• 屏幕展示：pixelRatio 2 即可
• 普通打印：pixelRatio 3
• 高清打印：pixelRatio 4+

导出 PDF

// 导出 PDF（页面尺寸为画布像素尺寸）
exportPlugin?.exportPdf()

PDF 导出基于 jsPDF，页面尺寸为画布的像素尺寸（width × height），方向为横向（landscape）。

导入 JSON

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

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

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

导入会清空画布

importJSON 内部调用 host.loadJSON()，会清空当前画布所有元素再加载新数据。如需追加，请先导出当前 JSON，合并数据后再导入。

完整的保存与恢复

// 保存（使用 host.toJSON() 获取 JSON 字符串）
function saveDesign() {
  const json = host.toJSON()
  localStorage.setItem('my-design', json)
}

// 恢复
function loadDesign() {
  const json = localStorage.getItem('my-design')
  if (json) {
    importPlugin?.importJSON(json)
  }
}

事件监听

导出和导入过程会发出事件，可用于进度提示和错误处理：

import type { ExportEventData, ImportEventData } from 'vkedit'

host.on('export:start', (data: ExportEventData) => {
  console.log('开始导出:', data.format)
})

host.on('export:error', (data: ExportEventData) => {
  console.error('导出失败:', data.error)
})

host.on('import:complete', (data: ImportEventData) => {
  console.log('导入完成:', data.format)
})

下一步

• 导出插件 API -- 完整 API 参考
• 导入插件 API -- 完整 API 参考