10.3 剪切板操作：文本、图片、HTML 读写

在桌面应用中，剪切板操作是非常高频的用户需求。Tauri 提供了跨平台的剪切板读写能力，支持文本、图片以及 HTML 格式数据的存取。所有操作都通过插件 API 实现，无需手动处理各平台底层差异。

前置配置

在 src-tauri/Cargo.toml 中添加剪切板插件依赖：

[dependencies]
tauri-plugin-clipboard-manager = "2"

然后在 Rust 主文件（通常是 src-tauri/src/lib.rs）中注册插件：

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_clipboard_manager::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

前端无需额外安装 npm 包，直接使用 @tauri-apps/plugin-clipboard-manager 提供的 API 即可。

文本读写

写入纯文本
将任意字符串写入系统剪切板，覆盖原有内容：

import { writeText } from '@tauri-apps/plugin-clipboard-manager';

await writeText('这段文字已复制到剪切板');

读取纯文本
获取当前剪切板中的文本内容（若剪切板为空或包含非文本数据则返回空字符串）：

import { readText } from '@tauri-apps/plugin-clipboard-manager';

const text = await readText();
console.log('剪切板文本:', text);

图片读写

图片操作基于二进制数据或 Base64 编码，支持常见的 PNG、JPEG 等格式。

写入图片
可以从 URL 获取图片再写入，也可以直接使用图片文件的字节数组：

import { writeImageBase64 } from '@tauri-apps/plugin-clipboard-manager';

// 使用 Base64 字符串写入图片（需包含 data:image/png;base64,… 这样的前缀）
await writeImageBase64('data:image/png;base64,iVBORw0KG...');

或者通过读取文件获取二进制数组后写入：

import { writeImage } from '@tauri-apps/plugin-clipboard-manager';
import { readFile } from '@tauri-apps/plugin-fs';

const fileBytes = await readFile('/path/to/image.png');
await writeImage(new Blob([fileBytes], { type: 'image/png' }));

读取图片
获取剪切板中的图片，返回 Base64 编码的数据：

import { readImageBase64 } from '@tauri-apps/plugin-clipboard-manager';

const base64Image = await readImageBase64();
if (base64Image) {
  document.getElementById('preview').src = base64Image;
}

HTML 读写

剪切板中可以存储带格式的 HTML 内容，常用于富文本编辑器或从网页复制内容。

写入 HTML
可以同时设置纯文本和 HTML 版本，以便不同目标应用选择合适的格式：

import { writeHtml } from '@tauri-apps/plugin-clipboard-manager';

const htmlContent = '<b>加粗文本</b> 和 <i>斜体文本</i>';
const plainText = '加粗文本 和 斜体文本';

await writeHtml(htmlContent, plainText);

第二个参数（纯文本）是可选的，但建议提供，这样在只支持纯文本的环境中粘贴时也能得到合理内容。

读取 HTML
读取剪切板中 HTML 格式的数据：

import { readHtml } from '@tauri-apps/plugin-clipboard-manager';

const html = await readHtml();
console.log('剪切板 HTML:', html);

实用提示

权限声明

Tauri 的安全模型要求你在 src-tauri/capabilities/default.json 或相应权限文件中声明剪切板权限，否则前端调用会失败。通常包含：

   "permissions": [
     "clipboard-manager:allow-read-text",
     "clipboard-manager:allow-write-text",
     "clipboard-manager:allow-read-html",
     "clipboard-manager:allow-write-html",
     "clipboard-manager:allow-read-image-base64",
     "clipboard-manager:allow-write-image-base64"
   ]

数据清理

如果应用处理敏感数据（如密码），建议在写入剪切板后提供“清除”功能。Tauri 允许清空剪切板：

   import { clear } from '@tauri-apps/plugin-clipboard-manager';
   await clear();

平台差异

在 Linux 上部分桌面环境可能不完全支持 HTML 或图片剪切板格式，开发时最好进行降级处理，例如检测到无 HTML 内容时回退到纯文本。

图片大小限制

写入大尺寸图片时注意内存使用，避免一次性加载几百 MB 的图片到 Base64 字符串；可考虑先压缩或缩放。

通过这些 API，你可以轻松为应用添加“复制到剪切板”和“从剪切板粘贴”的功能，无论是文本片段、截图分享还是富文本内容，都能跨平台一致地实现。