写入和读取剪切板内容

生活区岗

写入剪切板

使用 clipboard.js 第三方插件：
clipboard.js
安装clipboard.js

yarn

1. yarn add clipboard

复制代码

npm

1. npm install clipboard --save

复制代码

使用示例（vue）

1. <template>
2.        
3.           复制这段文本
4.    
5. </template>

复制代码

这里使用了vue的自定义指令，

• 指令第一次绑定到元素时，监听元素的点击（复制）事件。
  
• 点击元素时，执行text函数，并将结果（字符串）写入剪切板。
  
• 写入成功，执行success回调函数；写入失败，执行error回调函数。
  

原生API

可以使用原生API：Clipboard.writeText()实现写入剪切板。

1. var promise = navigator.clipboard.writeText(newClipText)

复制代码

• newClipText：写入的内容
  

其它API

• Clipboard: write()：该方法理论上可以写入任意数据(与writeText()不同，后者只能写入文本)。浏览器通常支持编写文本、HTML和PNG图像数据
  

读取剪切板

1. <template>
2.        
3.           <p @click="getClipboard">读取剪切板</p>
4.           <p>{{ content }}</p>
5.    
6. </template>

复制代码

使用原生API：Clipboard.readText() 即可。
其它API

• Clipboard: read() ：该方法理论上可以返回任意数据与readText()不同，后者只能返回文本)。浏览器通常支持读取文本、HTML和PNG图像数据
  

来源:https://www.cnblogs.com/cry0-0/p/18086370
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！