剪贴板工具

本文档介绍剪贴板工具的使用方法。

ClipboardUtils

剪贴板工具类，支持复制文本、HTML、图片等。

复制文本

import { ClipboardUtils } from '@vben/utils';

// 基础复制
await ClipboardUtils.copy('要复制的文本');

// 复制成功提示
try {
  await ClipboardUtils.copy('要复制的文本');
  message.success('复制成功');
} catch (error) {
  message.error('复制失败');
}

复制 HTML

import { ClipboardUtils } from '@vben/utils';

const html = '<div><h1>标题</h1><p>内容</p></div>';

await ClipboardUtils.copyHTML(html);

复制图片

import { ClipboardUtils } from '@vben/utils';

// 从 URL 复制图片
await ClipboardUtils.copyImage('https://example.com/image.jpg');

// 从 Blob 复制图片
const blob = await fetch(imageUrl).then(r => r.blob());
await ClipboardUtils.copyImageBlob(blob);

读取剪贴板

import { ClipboardUtils } from '@vben/utils';

// 读取文本
const text = await ClipboardUtils.readText();

// 读取图片
const imageBlob = await ClipboardUtils.readImage();

使用 Clipboard API

// 复制文本
await navigator.clipboard.writeText('文本内容');

// 读取文本
const text = await navigator.clipboard.readText();

// 复制多种格式
await navigator.clipboard.write([
  new ClipboardItem({
    'text/plain': new Blob(['纯文本'], { type: 'text/plain' }),
    'text/html': new Blob(['<b>HTML</b>'], { type: 'text/html' })
  })
]);

完整示例

<script setup lang="ts">
import { ref } from 'vue';
import { ClipboardUtils } from '@vben/utils';
import { message } from 'ant-design-vue';

const inputText = ref('');

async function handleCopy() {
  try {
    await ClipboardUtils.copy(inputText.value);
    message.success('复制成功');
  } catch (error) {
    message.error('复制失败');
  }
}

async function handlePaste() {
  try {
    const text = await ClipboardUtils.readText();
    inputText.value = text;
    message.success('粘贴成功');
  } catch (error) {
    message.error('粘贴失败');
  }
}

async function handleCopyHTML() {
  const html = `<div style="color: red;">${inputText.value}</div>`;
  await ClipboardUtils.copyHTML(html);
  message.success('复制 HTML 成功');
}
</script>

<template>
  <div>
    <a-input
      v-model:value="inputText"
      placeholder="输入要复制的内容"
      style="width: 300px; margin-right: 10px"
    />
    <a-button type="primary" @click="handleCopy">
      复制
    </a-button>
    <a-button @click="handlePaste" style="margin-left: 10px">
      粘贴
    </a-button>
    <a-button @click="handleCopyHTML" style="margin-left: 10px">
      复制为 HTML
    </a-button>
  </div>
</template>

兼容性处理

// 检查浏览器是否支持 Clipboard API
function isClipboardSupported() {
  return navigator.clipboard !== undefined;
}

// 降级方案：使用 document.execCommand
function copyTextFallback(text: string) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  
  try {
    document.execCommand('copy');
    return true;
  } catch (error) {
    return false;
  } finally {
    document.body.removeChild(textarea);
  }
}

// 统一复制函数
async function copyText(text: string) {
  if (isClipboardSupported()) {
    await navigator.clipboard.writeText(text);
  } else {
    copyTextFallback(text);
  }
}

API 参考

copy

复制文本到剪贴板。

ClipboardUtils.copy(text: string): Promise<void>

copyHTML

复制 HTML 到剪贴板。

ClipboardUtils.copyHTML(html: string): Promise<void>

copyImage

复制图片到剪贴板。

ClipboardUtils.copyImage(imageUrl: string): Promise<void>

readText

读取剪贴板文本。

ClipboardUtils.readText(): Promise<string>

注意事项

1. 权限：需要用户授权才能访问剪贴板
2. HTTPS：Clipboard API 只在 HTTPS 环境下可用
3. 用户交互：某些浏览器要求在用户交互（如点击）后才能访问剪贴板

参考资源

• Clipboard API 文档