NowClipboard官网 - 强大的现代剪贴板工具库

为什么选择 NowClipboard？

对比 ClipboardJS，功能全面升级

现代 API 优先

优先使用 Clipboard API，自动降级到 execCommand。HTTPS 与 HTTP 环境均可工作，兼容 IE9+。

图片复制

支持 Blob、File、Image、Canvas、URL 多种图片源复制到剪贴板。ClipboardJS 不支持此功能。

富文本复制

同时复制 HTML + 纯文本，粘贴到 Word、邮件、富文本编辑器自动保留格式。

粘贴事件监听

通过 onPaste 监听粘贴事件，自动解析文本、HTML、文件三种类型，支持事件委托。

剪贴板历史

History 类自动记录剪贴板变更，支持搜索、持久化存储，轻松实现历史记录功能。

跨标签页同步

onSync() 基于 BroadcastChannel 实现标签页间剪贴板操作同步，多窗口协作无感。

多格式写入

writeFormats() 一次写入多种 MIME 类型（text/plain + text/html），粘贴时自动适配目标格式。

Node.js 支持

浏览器 + Node.js 双环境运行。Node 端自动适配 clip (Win)、pbcopy (Mac)、xclip (Linux)。

TypeScript & ESM

完整的 .d.ts 类型定义，ESM 模块支持 tree-shaking。同时兼容 UMD / CommonJS / AMD。

在线体验

点击按钮，直接试试效果

文本复制

动态内容复制

点击按钮复制当前时间

富文本复制

NowClipboard

零依赖 的现代剪贴板工具库，支持 富文本 复制。

write() 写入

writeImage() 写入图片

writeFormats() 多格式写入

History 剪贴板历史

onSync() 跨标签页同步

安装使用

多种方式，随你选择

        
// 安装
npm install nowclipboard

// CommonJS
const NowClipboard = require('nowclipboard');

// 复制文本
NowClipboard.copy('Hello World')
  .then(text => console.log('已复制:', text));
      

        
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/nowclipboard@1.1.9/NowClipboard.min.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/nowclipboard@1.1.9/NowClipboard.min.js"></script>

<!-- 使用 -->
<script>
  NowClipboard.copy('Hello!');
</script>
      

        
// ESM 导入
import NowClipboard from 'nowclipboard';

// 按需导入静态方法
import { copy, read, copyImage } from 'nowclipboard';

// 复制图片
await copyImage(canvas);

// 读取剪贴板
const text = await read();
      

        
<!-- 声明式绑定，无需写 JS -->
<input id="input" value="要复制的内容">
<button class="copy-btn" data-nc-target="#input">复制</button>

<script>
  const cb = new NowClipboard('.copy-btn');
  cb.on('success', e => {
    console.log('复制成功:', e.text);
  });
</script>
      

API 速览

简洁直观，覆盖所有剪贴板场景

NowClipboard.copy(text)

复制文本到剪贴板，返回 Promise

await NowClipboard.copy('Hello');
// 带重试配置
await NowClipboard.copy('Hello', {
  retries: 3,
  timeout: 5000
});

NowClipboard.read()

读取剪贴板文本内容 (需 HTTPS)

const text = await NowClipboard.read();
console.log('剪贴板内容:', text);

NowClipboard.copyImage(source)

复制图片，支持 Blob/Canvas/URL 等

// 从 Canvas 复制
await NowClipboard.copyImage(canvas);
// 从 URL 复制
await NowClipboard.copyImage('pic.png');

NowClipboard.copyRich(opts)

复制富文本 (HTML + 纯文本)

await NowClipboard.copyRich({
  html: '<b>加粗</b>',
  text: '加粗'
});

NowClipboard.onPaste(target, cb)

监听粘贴事件，自动解析内容

NowClipboard.onPaste(null, (data) => {
  console.log(data.text);
  console.log(data.html);
  console.log(data.files);
});

new NowClipboard(trigger)

实例化模式，事件委托 + HTML 属性绑定

const cb = new NowClipboard('.btn');
cb.on('success', e => { ... });
cb.on('error', e => { ... });
cb.destroy(); // 释放资源

NowClipboard.write(text, opts?)

copy() 的语义别名，支持 AbortSignal 取消

// 等同于 copy()
await NowClipboard.write('Hello');
// 带 AbortSignal
const ctrl = new AbortController();
await NowClipboard.write('Hi', {
  signal: ctrl.signal
});

NowClipboard.writeImage(source)

写入图片到剪贴板（浏览器 + Node.js）

// Canvas
await NowClipboard.writeImage(canvas);
// Blob
await NowClipboard.writeImage(blob);
// URL (浏览器自动获取)
await NowClipboard.writeImage('img.png');

NowClipboard.writeFormats(formats)

一次写入多种 MIME 类型

await NowClipboard.writeFormats({
  'text/plain': '纯文本',
  'text/html': '<b>富文本</b>'
});

new NowClipboard.History(opts?)

剪贴板历史记录，支持搜索和持久化

const h = new NowClipboard.History({
  pollInterval: 1000,
  maxItems: 100,
  persist: true
});
h.start();
h.list();   // 所有记录
h.search('key'); // 搜索

NowClipboard.onSync(opts?)

跨标签页剪贴板操作同步

const sync = NowClipboard.onSync();
sync.addListener((data) => {
  console.log('同步:', data.type);
  console.log('内容:', data.text);
});
sync.destroy(); // 关闭