11.3 剪切板操作：文本、图片、文件读写

剪贴板是桌面应用中最常用的系统交互之一，无论是复制粘贴文本、分享截图还是拖拽文件，都离不开对剪贴板的读写。Electron 提供了 clipboard 模块，让应用能轻松读写系统剪贴板中的内容。这一节我们聚焦最实用的三种数据类型：纯文本、图片和文件。

11.3.1 读写纯文本

纯文本是最基础也最常用的剪贴板操作。clipboard 模块提供了同步方法，使用起来非常直观。

写入文本到剪贴板
只需一行代码即可将字符串写入系统剪贴板：

const { clipboard } = require('electron');

clipboard.writeText('早上好，Electron！');

执行完成后，用户在任何地方按 Ctrl+V 就会粘贴出这句话。

读取剪贴板中的文本
同样简单：

const text = clipboard.readText();
console.log('剪贴板内容：', text);

如果剪贴板中不是文本格式，readText() 会返回空字符串。因此在读取后最好做一下非空判断。

实际应用场景

复制按钮：比如代码片段展示区域，用户点击复制图标后调用 clipboard.writeText(code)。
快捷输入：工具类应用可以自动将生成的模板文本写入剪贴板，用户直接粘贴使用。
状态监控：一些剪贴板管理工具会定时轮询 clipboard.readText()，对比上一次内容，实现历史记录功能。

11.3.2 读写图片

除了文字，很多场景需要处理图片：截图工具需要把截取的图像写入剪贴板，设计软件需要读取剪贴板中的图片粘贴到画布上。Electron 通过 NativeImage 和 clipboard 组合支持图片的读写。

将图片写入剪贴板
首先需要把图片转换为 NativeImage 对象，然后调用 clipboard.writeImage()。

从本地文件路径创建 NativeImage 并写入剪贴板：

const { clipboard, nativeImage } = require('electron');
const path = require('path');

const imagePath = path.join(__dirname, 'screenshot.png');
const img = nativeImage.createFromPath(imagePath);
clipboard.writeImage(img);

如果是当前页面的截图（例如通过 Canvas 或 HTML5 API 生成的 base64 图片），可以这样操作：

// 假设 dataURL 是 canvas.toDataURL() 的结果
const img = nativeImage.createFromDataURL(dataURL);
clipboard.writeImage(img);

读取剪贴板中的图片
clipboard.readImage() 返回一个 NativeImage 对象，你可以直接用它显示在页面上，或者保存为文件：

const img = clipboard.readImage();
if (!img.isEmpty()) {
  // 转换为 PNG 的 dataURL，方便在 <img> 标签中使用
  const dataURL = img.toDataURL();

  // 或者保存到磁盘
  const buf = img.toPNG();
  require('fs').writeFileSync('clipboard-image.png', buf);
}

isEmpty() 用来判断剪贴板中是否确实有图片，避免空操作。

实际应用场景

截图软件：截图完成后自动将图像写入剪贴板，用户可直接粘贴到聊天窗或文档。
轻量级图片编辑器：从剪贴板读取图片实现“粘贴导入”功能。
图像格式转换：允许用户复制一张图片后，展示不同格式（PNG/JPEG）的转换结果。

11.3.3 读写文件（文件引用）

有些时候用户复制的不是文件内容本身，而是文件的“引用”，比如在资源管理器中按 Ctrl+C 复制一个文件，然后可以在其他地方粘贴。Electron 虽然不能直接通过剪贴板实现“粘贴文件”的完整操作（因为这涉及操作系统层面的文件对象拖放），但它支持读取和写入文件路径列表。

写入文件路径到剪贴板
可以将一个或多个文件的完整路径写入剪贴板，使其他程序将其视为“文件”类型的数据。这在实现类似于导出/备份并将文件路径复制给用户时很有用。

const { clipboard } = require('electron');

// 准备文件路径数组
const filePaths = [
  '/Users/username/Documents/report.pdf',
  '/Users/username/Downloads/chart.png'
];

clipboard.writeBuffer('text/uri-list', Buffer.from(filePaths.join('\n'), 'utf8'));

由于操作系统对文件粘贴使用 text/uri-list 格式（每行一个 file:// URI），这里直接写入了换行分隔的本地路径。更严谨的做法是使用 file:// 协议前缀。

Electron 7.0 起也提供了更便捷的方法 clipboard.writeBuffer 和 clipboard.write 来处理自定义格式，但对于文件路径这种常见需求，上述写法可正常工作。

读取剪贴板中的文件路径
如果剪贴板中有文件引用，通常表现为 text/uri-list 或 text/plain 格式的带文件协议的字符串。我们可以读取纯文本后解析出有效路径。

const raw = clipboard.readText();
// 示例内容: "file:///home/user/桌面/测试.txt\r\n"
const paths = raw.split(/\r?\n/)
  .filter(line => line.startsWith('file://'))
  .map(line => decodeURI(line.replace(/^file:\/\//, '')));

console.log(paths); // 输出解析后的本地绝对路径数组

在 Windows 上，路径格式可能是 file:///C:/Users/...，需要针对性处理盘符斜杠问题。简化版本可先尝试 readText()，再结合正则提取有效路径。

实际应用场景

上传组件：用户复制文件后，在应用内识别并提示“从剪贴板导入”。
文件整理工具：读取剪贴板中的文件列表，进行批量重命名或移动。
跨应用协作：设计工具将导出文件路径写入剪贴板，方便用户在邮件客户端粘贴为附件。

11.3.4 写入自定义格式和高级用法

除了文本和图片，Electron 的 clipboard 模块还支持写入任意 Buffer 数据并指定 MIME 类型。这在需要在应用间交换私有数据时非常有用（比如自定义富文本格式、编辑器内部状态）。

// 写入自定义格式数据
const data = Buffer.from(JSON.stringify({ type: 'my-app-data', value: 123 }), 'utf8');
clipboard.writeBuffer('application/json', data);

// 读取时
const buf = clipboard.readBuffer('application/json');
if (buf.length) {
  const parsed = JSON.parse(buf.toString('utf8'));
  console.log(parsed);
}

不过要注意，系统剪贴板是全局共享的，写入私有格式时要确保不会与其他应用冲突，且数据量不宜过大。

11.3.5 注意事项与最佳实践

安全提示：剪贴板内容可能包含敏感信息（密码、密钥等）。读取或写入时务必确保用户知情，避免在后台静默操作造成隐私泄漏。
跨平台兼容性：不同操作系统对剪贴板格式的支持略有差异。例如，Linux 下使用 clipboard 模块依赖 X11 剪贴板，Wayland 环境下可能需要额外适配。对于图片格式，推荐使用 PNG，兼容性最好。
性能考量：不要在高频循环中持续读剪贴板（如每 100ms 轮询），这会消耗 CPU 并可能干扰其他应用。如果要做剪贴板监控，建议使用 setInterval 间隔 500ms~1s，并结合内容哈希判断是否变化。
渲染进程中的使用：由于安全策略，渲染进程可能无法直接使用 clipboard 模块。推荐在主进程操作，通过 IPC 暴露安全方法给渲染进程，或者通过 preload 脚本桥接 clipboard 提供只读/写入受限能力。

通过掌握文本、图片、文件这三种最核心的剪贴板操作，你的 Electron 应用就能无缝融入用户的日常工作流，实现真正原生级别的交互体验。