【技术】JS 操作剪贴板

1、原生 JS 操作剪贴板复制文本

在博客类网站看到一段代码，想复制，如果代码量比较大，选中内容复制会比较麻烦。多数情况下会在代码右上角看到一个复制按钮，点击即可复制代码，是如何实现的呢？

准备一个按钮，样式可以自定，绑定一个单击事件

<button type="button" onclick="copyVal()">复制</button>
<div class="content">这里是一段文字...</div>

编写 copyVal() 方法

<script>
    function copyVal(){
    	// 获取内容的组件
    	let content = document.querySelector(".content");
    	// 选中组件内容
    	window.getSelection().selectAllChildren(content);
    	// 执行拷贝命令
    	document.execCommand("Copy");
    }
</script>

2、原生 JS 操作剪贴板读取图片实现异步上传

navigator 对象

navigator 对象在使用时有弊端，仅在安全域环境下生效。安全域环境是指：https 请求、localhost、127.0.0.1 作为请求的情况。如果是 IP 地址访问则会出现 navigator.clipboard 是 underfind 的情况。原因是浏览器的安全限制，不希望代码随意访问用户的剪贴板。不过可以采用另外一种方案解决。

async function getImageFromClipboard() {
    try {
        // 异步读取剪贴板内容
        let clipboardItems = clipboardItems = await navigator.clipboard.read();
        
        // 遍历剪贴板
        for (const clipboardItem of clipboardItems) {
            // 获取剪贴板内容类型
            for (const type of clipboardItem.types) {
                // 图片格式判断
                if (type === 'image/png' || type === 'image/jpeg') {
                    // 获取图片元数据
                    const blob = await clipboardItem.getType(type);
                    // 创建文件读取对象
                    const reader = new FileReader();
                    // 文件读取成功
                    reader.onload = (e) => {
                        // 创建图片文件对象
                        const img = new Image();
                        // 把图片添加到页面元素中
                        $(".img-box")[0].appendChild(img);
                    };
                    // 将数据读取为数据URL
                    reader.readAsDataURL(blob);

                    /* 异步上传图片 */
                    // 构建文件对象，传递 blob 参数
                    const file = new File([blob], "pasted-image." + type.split("/")[1], {
                        type: type,
                    });
                    // 构建表单对象
                    var formData = new FormData();
                    formData.append('files', file);
                    formData.append('language', $("#language").val());

                    ajaxUpload(formData);
                    /* 异步上传图片 */
                } else {
                    alert("剪贴板最近内容不是图片！");
                    return;
                }
            }
        }
    } catch (error) {
        console.error('Failed to read clipboard contents:', error);
    }
}
/**
 * 通过表单提交
 */
function ajaxUpload(data){
    $.ajax({
        url: "/upload",
        type: "post",
        cache: false,
        data: data,
        processData: false,// 不处理数据
        contentType: false, // 不设置内容类型
        dataType: "json",
        success: function (data) {
            console.log("请求成功：", data);
            // 这里是请求成功的业务逻辑
        },
        error: function () {
            console.log("请求失败！")
        }
    });
}

监听粘贴事件

navigator 对象的使用弊端可以曲线救国，通过监听粘贴事件实现相关业务。

document.onpaste = function(event){
    try {
        // 获取剪贴板的元素集合
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        // 遍历剪贴板元素
        for (var i = 0 ; i < items.length ; i++) {
            var item = items[i];
            // 判断图片类型
            if (item.type.indexOf("image") != -1) {
                // 元素转换为文件对象
                var file = item.getAsFile();
                /* 图片展示到页面 */
                // 创建读取文件组件(JS内置对象)
                var fr = new FileReader();
                // 读取文件
                fr.readAsDataURL(file);
                // 当数据读取完成的触发一个事件
                fr.onload = function () {
                    // 获取文件数据
                    var url = fr.result;
                    let img = `<img src="${url}" id="showImg"/>`;
                    // 把图片展示到页面
                    $(".img-box").append(img);
                }
                /* 图片展示到页面 */

                /* 异步上传图片 */
                // 构建表单对象
                var formData = new FormData();
                // 表单添加文件，注意第一个参数是传递数据的 key，也就是 input file 的 name 属性的值
                formData.append('files', file);

                ajaxUpload(formData);
                /* 异步上传图片 */
                break;
            }
        }
    } catch (error) {
        console.error('Failed to read clipboard contents:', error);
    }
}

3、剪贴板插件

因为代码兼容问题，可以使用剪贴板插件：https://clipboardjs.com/