复制本地链接到剪切板方法

复制链接方法

<div id="article" name={window.location.href}>复制链接</div>//复制当前的地址
...
 var clipBoardContent = document.getElementById("article").attributes["name"].value;//复制的内容
        let oInput = document.createElement('input'); //创建一个input标签
        oInput.value = clipBoardContent; //让标签内容等于复制的内容
        document.body.appendChild(oInput);//将input添加的document中
        oInput.select();//选择input框中的所有文本
        document.execCommand("Copy");//复制input中的内容到剪切版
        oInput.style.display = 'none';//隐藏input
        document.body.removeChild(oInput);//移除input
        message.toast('复制成功')

网上都说input框复制的内容不会换行，要用textarea代替 没有测试过 有兴趣自己取了解 只是可能会有这个问题

访问系统剪切板的功能的，主要依靠 Document.execCommand() 接口实现复制、粘贴、剪切等功能。

• document.execCommand(‘copy’)复制
• document.execCommand(‘cut’)粘贴
• document.execCommand(‘paste’)剪切

clipboard

以上是剪切板的老版内容，新版使用了新的api clipboard

 if (navigator.clipboard) { //判断浏览器是否支持新的api  如果不支持就返回undefiend
            (async () => {
                await navigator.clipboard.writeText(window.location.href); //navigator.clipboard返回的是一个promise对象
                message.toast('复制成功')
            })();
 } else {
            var clipBoardContent = document.getElementById("article").attributes["name"].value;
            let oInput = document.createElement('input');
            oInput.value = clipBoardContent;
            document.body.appendChild(oInput);
            oInput.select();//选择input框中的所有文本
            document.execCommand("copy");
            oInput.style.display = 'none';
            document.body.removeChild(oInput);
            message.toast('复制成功')
 }

方法

Clipboard 对象提供了四个方法，用来读写剪贴板。它们都是异步方法，返回 Promise 对象。

• read() 从剪贴板读取数据（比如图片），返回一个 Promise对象。
• readText() 从操作系统读取文本，返回一个 Promise对象。
• write() 写入任意数据至操作系统剪贴板。
• writeText() 写入文本至操作系统剪贴板。