JavaScript 读写剪贴板之方式汇总

JavaScript操作剪贴板虽然存在安全问题，但在某些应用场景下还是很方便的，比如复制一个link 等，JavaScript操作剪贴板的方式有：
方式1. 使用navigator 的Clipboard 对象
方式2. 使用 document.execCommand
方式3. window.clipboardData 对象
方式4. 使用一些封装的第三方库

方式1 和方式2 是JavaScript 语言原生的，方式2是比较传统的方式，虽然目前各浏览器还支持，但存在着一些缺点和不足；
方式1是推荐的方式，因为出现的时间较晚，对浏览器版本有一定的要求；方式3是IE 浏览器特有的，不够在Edge版本也已经不支持了；方式4是使用封装的一些clipboard组件。

1. [推荐方式] navigator 的Clipboard 对象

所有操作是异步的，返回Promise对象，不会造成页面卡顿
可以将任何内容（包括图片）放入剪贴板

基本使用

获取Clipboard 对象， Clipboard 包含在navigator中，

const clipboard = navigator.clipboard;

如果浏览器不支持，则返回undefined

写入内容到剪贴板 navigator.clipboard.writeText('写入的内容')
从剪贴板读取内容。navigator.clipboard.readText()
读取的时候浏览器会弹出一个窗口进行确认。
因为这里使用的是异步的返回，所以方法返回的是一个Promise对象，要获取剪贴板内容，可以在then方法中获取。

        clipPromise.then(function(clipText){alert(clipText); // 剪贴板内容});

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ClipBoard Demo</title>
<script type="text/javascript">function readClipText(){var clipPromise = navigator.clipboard.readText();clipPromise.then(function(clipText){alert(clipText);});}</script>
</head>
<body>
<input type="button" value="Clipboard-写数据" onclick="navigator.clipboard.writeText('123456')">
<input type="button" value="Clipboard-读数据" onclick="navigator.clipboard.readText().then(function(clipText){ alert(clipText);})">
<input type="button" value="Clipboard-读数据2" onclick="readClipText()">
</body>
</html>

限制

在Chrome 只有HTTPS 的页面支持（本地开发localhost除外）
对应读和写两个权限。写权限自动授予，读权限需要用户同意。也就是在代码在读取剪切板的数据时会弹出一个对对话框让用户确认。

浏览器兼容

2. [废弃的方式] document.execCommand

功能已经过时了，虽然在一些浏览器中功能也正常，不建议使用，因为有可能随时会不支持。

使用方式是先选中文本，然后调用 document.execCommand('copy') 复制到剪切板。
粘贴时，使用document.execCommand('paste') 将剪切板中的内容输出到当前焦点元素

document.execCommand('copy')
document.execCommand('cut')
document.execCommand('paste')

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document clipboard</title>
<script type="text/javascript">function myDocClipboard(){document.getElementById('myText').select();document.execCommand('copy');}
</script>
</head>
<body>
<input type="text" id="myText" value="123456"/>
<input type="button" value="document-剪切板" onclick="myDocClipboard()">
</body>
</html>

限制

只能将选中的内容复制到剪贴板，而不能是任意内容
操作是同步的，如果数据量大，页面卡顿

3. [ IE特有方式] window.clipboardData 对象

在IE浏览器中，window 对象有一个clipboardData对象，该对象的setData和getData用来设置或获取剪切板中的值。
在IE 11 中可以使用，但是在Microsoft Edge已经不能使用了。

设置剪切板内容

window.clipboardData.setData('Text', '123456')

获取剪切板内容

window.clipboardData.getData('Text')

测试：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="IE剪切板-设置值" onclick="window.clipboardData.setData('Text', '123456')">
<input type="button" value="IE剪切板-获取值" onclick="alert(window.clipboardData.getData('Text'))">
</body>
</html>

4. [其他方式] 第三方库

早期有很多第三方库使用Flash方式实现剪贴板功能，但是现在很多浏览器默认都不提供对Flash的支持了，所有那种方式自然就不推荐使用了，这里就介绍一个还不错的库：
clipboard https://github.com/zenorocha/clipboard.js

轻量级，整个库文件 3k多，不依赖Flash。

步骤也很简单：

导入库
创建 ClipboardJS 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clipboard 库</title>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
</head>
<body><textarea id="bar">需要复制的内容</textarea><button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">复制到剪切板</button><script>var clipboard = new ClipboardJS('.btn');</script></body>
</html>