js获取剪切板文本、图片、富文本

效果图

代码

doctype html>


    
    
    
    web03.cn
    
        .box {
            padding: 20px;
            border: 1px solid #ccc;
            margin: 20px;
        }

        img {
            max-height: 200px;
        }
    



    
    


    
    
    


    
    



零三的笔记：https://web03.cn



    document.getElementById("parseTxt").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        // let text = clipboardData.getData('')
        const items = clipboardData.items;
        if (items.length > 0 && items[0].kind === "string") {
            items[0].getAsString(function (e) {
                document.getElementById("textView").innerText = e
            })
        } else {
            alert("剪切板没内容")
        }
    })
    document.getElementById("parseImg").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        const items = clipboardData.items;
        console.log(items[0])
        if (items.length > 0 && items[0].kind === "file") {
            let blob = items[0].getAsFile()
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
                console.log(e)
                document.getElementById("imgView").src = e.target.result
            };
        } else {
            alert("剪切板没图片内容")
        }
    })
    document.getElementById("parseRichText").addEventListener("paste", function (event) {
        const clipboardData = event.clipboardData || event.originalEvent.clipboardData
        const items = clipboardData.items;
        if (items.length > 0 && items[1].kind === "string") {
            items[1].getAsString(function (e) {
                document.getElementById("richTextView").innerHTML = e
            })
        } else {
            alert("剪切板没内容")
        }
    })

demo： https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/demo/%E8%8E%B7%E5%8F%96%E5%89%AA%E5%88%87%E6%9D%BF%E5%86%85%E5%AE%B9.html