使用Clipboard API复制JsonTree类型设置报错，求可行解决方案

云上老周

2026-8-15

解决直接复制JsonTree到剪贴板的类型错误问题

你遇到的错误是因为navigator.clipboard.write()要求传入ClipboardItem[]类型的参数，但你直接传入了原始JSON对象，类型不匹配导致报错。要原样复制JsonTree结构，可通过以下两种方法实现：

方法一：使用`writeText`简化文本写入

这是最常用的方式，先将JSON对象序列化为格式化字符串，写入剪贴板后，粘贴时再解析回对象：

// 序列化JSON对象为带缩进的字符串，保留格式
const settingsStr = JSON.stringify(settings, null, 2);
// 写入剪贴板（需在异步函数中使用await）
await navigator.clipboard.writeText(settingsStr);

粘贴时还原：

// 读取剪贴板文本
const clipboardStr = await navigator.clipboard.readText();
// 解析回原始JSON对象
const restoredSettings = JSON.parse(clipboardStr);

方法二：使用`ClipboardItem`写入JSON类型数据

如果需要明确标记剪贴板内容为JSON类型（方便其他应用识别），可以创建Blob并包装成ClipboardItem：

const settingsStr = JSON.stringify(settings, null, 2);
// 创建JSON类型的Blob
const jsonBlob = new Blob([settingsStr], { type: 'application/json' });
// 包装为ClipboardItem
const clipboardItem = new ClipboardItem({ 'application/json': jsonBlob });
// 写入剪贴板
await navigator.clipboard.write([clipboardItem]);

粘贴时读取JSON类型数据：

const clipboardItems = await navigator.clipboard.read();
for (const item of clipboardItems) {
  if (item.types.includes('application/json')) {
    const blob = await item.getType('application/json');
    const settingsStr = await blob.text();
    const restoredSettings = JSON.parse(settingsStr);
    // 处理还原后的对象
    break;
  }
}