写入和读取剪切板内容

  • 写入和读取剪切板内容已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

使用 clipboard.js 第三方插件:clipboard.jsyarnnpm这里使用了vue的自定义指令,可以使用原生API:Clipboard.writeText()实现写入剪切板。


写入剪切板

使用 clipboard.js 第三方插件:

clipboard.js

安装clipboard.js

yarn

yarn add clipboard 

npm

npm install clipboard --save 

使用示例(vue)

<template> 	<div> 	  <span v-copy>复制这段文本</span>     </div> </template>  <script> import ClipboardJS from "clipboard";  export default { 	directives: { 		copy: { 		  bind(el, binding, vnode) { 		    // 获取vue实例 		    const that = vnode.context; 		    // 1-监听点击的元素 		    that.handleCopy(el); 		  }, 		} 	}, 	methods: { 		handleCopy(element) {           // 2-实例化剪切板对象,指定要复制文本的元素           const clipboard = new ClipboardJS(element, {             /**              * 动态获取要复制的文案              * @param {HTMLElement} trigger 监听点击的元素              * @return {string} 要复制的文案              */             text: function(trigger) {               return trigger.innerText;             }           });           // 3-结果回调           clipboard.on('success', function(e) {             console.info('e= :', e);              // 清除文字的选中状态             e.clearSelection();           });            clipboard.on('error', function(e) {             console.error('Action:', e.action);             console.error('Trigger:', e.trigger);           });         }, 	} } </script> 

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

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

写入和读取剪切板内容

原生API

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

var promise = navigator.clipboard.writeText(newClipText) 
  • newClipText:写入的内容

其它API

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

读取剪切板

<template> 	<div> 	  <p @click="getClipboard">读取剪切板</p> 	  <p>{{ content }}</p>     </div> </template>  <script> export default { 	data() { 		return { 			content: '', 		} 	}, 	methods: { 		async getClipboard() {           // 读取剪切板           const clipboardContent = await navigator.clipboard.readText();           this.content = clipboardContent;         }, 	} } </script> 

使用原生API:Clipboard.readText() 即可。

其它API

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