js 如何复制内容到剪切板最新方法

素颜马尾好姑娘i 2023-01-08 10:27 100阅读 0赞

项目上需要将文本内容复制到剪切板，看了网上的方法，有用 clipboard.js 插件的，npm 上还有一些相似插件。还有手写的，但是原理都是一样的。

都是通过调用 document.execCommand() 方法模拟浏览器复制操作。

但是通过 [https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand][https_developer.mozilla.org_zh-CN_docs_Web_API_Document_execCommand] 查看发现 document.execCommand() 这个方法已废弃了，但是很多浏览器还是支持的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

最新的方法是用 [Clipboard API][]  [https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard][https_developer.mozilla.org_zh-CN_docs_Web_API_Clipboard]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1][]

我们只测试 [`writeText()`][writeText] 方法

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>es6</title>
    </head>
    <body>
    	<button onclick="copy()">copy</button>
        <script type="text/javascript">
    	function copy() {
    		navigator.clipboard.writeText("<empty clipboard>").then(function() {
    		  alert('clipboard successfully set')
    		}, function() {
    		  alert('clipboard write failed')
    		});
    	}
    	</script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2][]

但是可能有些浏览器还不支持，最新的 ie浏览器是支持的，试过了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 3][]

[https_developer.mozilla.org_zh-CN_docs_Web_API_Document_execCommand]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20221119/61a7cd7132eb4b80bcb0db2d2a4db09d.png
[Clipboard API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API
[https_developer.mozilla.org_zh-CN_docs_Web_API_Clipboard]: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1]: /images/20221119/18b84976704a4c62bf2bb5584966826f.png
[writeText]: https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/writeText
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2]: /images/20221119/74d498bbb40a416cab356b7ca0536785.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 3]: /images/20221119/2e626cb5364f4159b2c7e75abd99075e.png