js 获取剪切板内容

最新推荐文章于 2024-07-28 20:27:10 发布

帅哥哥珍藏版

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量5.2k

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52792889/article/details/126865262

版权

1. 粘贴事件

const items = (event.clipboardData || window.clipboardData).items
    const len = items.length
    let isFalg = true
    for (let i = 0; i < len; i++) {
        if (items[i].kind === 'file' && items[i].type.indexOf('image') !== -1) {
            isFalg = false
            // 图片格式
            const file = items[i].getAsFile() // 获取⽂件数据
            const blob = new Blob([file], { type: file.type })
            console.log('粘贴的是图⽚类型', blob, file)
            const formdate = new FormData()
            formdate.append('file', file)
        }
    }
    if (isFalg) {
        const html = (event.clipboardData || window.clipboardData).getData('text/html')
        if (html) {
            // html格式
        } else {
            // 字符串格式
            const text = (event.clipboardData || window.clipboardData).getData('text')
           
        }
    }

2. 手动获取

 navigator.permissions.query({ name: 'clipboard-read' }).then((result) => {
        if (result.state === 'granted' || result.state === 'prompt') {
            navigator.clipboard.read().then((data) => {
                for (let i = 0; i < data.length; i++) {
                    let contentType = data[i].types[data[i].types.length - 1]
                    data[i].getType(contentType).then((blob) => {
                        const reader = new FileReader()
                        if (contentType == 'text/html' || contentType == 'text/plain') {
                            // html 和 字符串
                            reader.readAsText(blob, 'utf-8')
 
                            reader.onload = function () {
                                 
                                console.log(reader.result);
                            }
                        } else {
                            // 图片
                            let file = new File([blob], uuid(), { type: contentType, lastModified: Date.now() });
                        }
                        

                    })

                }
            })
        }
    })

3. 写入剪切板

export const copySelect = (selArea) => {
    console.log("复制的内容：");
    console.log(selArea);
    const input = document.createElement('input')
    input.style.position = 'absolute'
    input.style.left = '-9999px'
    input.style.top = '-9999px'
    document.body.appendChild(input)
    input.value = selArea
    input.select()
    document.execCommand('copy')
    // console.log('复制成功')
    document.body.removeChild(input)
}