NowClipboard

强大的现代剪贴板工具库 — 零依赖，支持浏览器和 Node.js 双环境
文本 / 图片 / 富文本复制，粘贴监听，自动重试，开箱即用

npm install nowclipboard

GitHub npm 在线预览交互演示 ↓

为什么选择 NowClipboard？

对比 ClipboardJS，功能全面升级

现代 API 优先

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

图片复制

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

富文本复制

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

粘贴事件监听

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

Node.js 支持

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

TypeScript & ESM

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

在线体验

点击按钮，直接试试效果

文本复制

动态内容复制

点击按钮复制当前时间

富文本复制

NowClipboard

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

安装使用

多种方式，随你选择

        
// 安装
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.3/NowClipboard.min.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/nowclipboard@1.1.3/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(); // 释放资源