复制粘贴工具函数

前端通用剪贴板工具函数：复制与粘贴实现（兼容http)

在前端开发中，复制和粘贴文本到剪贴板是非常常见的需求。本文将介绍一个简单易用、兼容性良好的 TypeScript 工具函数，帮助你轻松实现文本的复制与粘贴。

功能简介

• copy(text: string): Promise

复制指定文本到剪贴板，支持现代浏览器和部分旧浏览器的兼容写法。

• paste(): Promise

从剪贴板读取文本内容，支持现代浏览器和部分旧浏览器的兼容写法。

代码实现

    /**
 * 复制文本到剪贴板
 * @param text 要复制的文本
 * @returns 是否复制成功
 */
export async function copy(text: string): Promise<boolean> {
    try {
        if (navigator.clipboard) {
            await navigator.clipboard.writeText(text)
            return true
        }
        const textarea = createTempTextarea(text)
        document.body.appendChild(textarea)
        textarea.select()
        const success = document.execCommand('copy')
        document.body.removeChild(textarea)
        return success
    } catch (error) {
        console.error('复制失败:', error)
        return false
    }
}

/**
 * 从剪贴板粘贴文本
 * @returns 剪贴板中的文本内容
 */
export async function paste(): Promise<string> {
    try {
        if (navigator.clipboard) {
            return await navigator.clipboard.readText()
        }
        return await new Promise<string>((resolve) => {
            const textarea = createTempTextarea()
            document.body.appendChild(textarea)
            textarea.focus({ preventScroll: true })
            textarea.select()
            textarea.addEventListener('paste', (e: ClipboardEvent) => {
                e.preventDefault()
                resolve(e.clipboardData?.getData('text/plain') || '')
                document.body.removeChild(textarea)
            }, { once: true })
        })
    } catch (error) {
        console.error('粘贴失败:', error)
        throw error
    }
}

/**
 * 创建临时 textarea 元素
 * @param text 预填充的文本内容
 * @returns textarea 元素
 */
export function createTempTextarea(text = ''): HTMLTextAreaElement {
    const textarea = document.createElement('textarea')
    textarea.style.position = 'fixed'
    textarea.style.opacity = '0'
    textarea.value = text
    return textarea
}

使用示例

复制文本

import { copy } from './Clipboard'
await copy('hello world')

粘贴文本

import { paste } from './Clipboard'
const text = await paste()
console.log(text)

兼容性说明

• 优先使用 navigator.clipboard，这是现代浏览器推荐的异步剪贴板 API。

• 对于不支持 navigator.clipboard 的环境，自动降级为 document.execCommand('copy') 和监听 paste 事件的方式，兼容性更好。

总结

本工具函数简单易用，适合在 Vue、React 等主流前端框架项目中直接引入使用。你可以根据实际需求进行二次封装或扩展。如需源码或有问题欢迎评论区交流！