vue中获取剪切板中的内容
目录
1.说明
2.示例
3.总结
1.说明
在系统中的画面或者时外部文件中进行拷贝处理后，在页面中可以获取剪切板的内容。
2.示例
方式①(直接获取)
// 异步函数获取剪切板内容
async function getClipboardContent(ev: any) {try {ev.preventDefault()const clipboardText = await navigator.clipboard.readText();const str = clipboardText.split(' ')str.forEach(item => {if (item) {data.value.push({name: item})}})// 处理剪切板内容console.log(str);} catch (err) {console.error('Failed to read clipboard contents: ', err);return null;}
}点击页面中的按钮，触发上述方法，通过navigator.clipboard.readText()方法，获取剪切板的内容。使用这个方法出现这样的问题，当从系统的页面中拷贝内容时，通过上述方法可以直接读取剪切板的内容，但是从系统外部的文件中拷贝内容时，点击页面的按钮触发这个方法时，会出现一个粘贴按钮，或者操作提示，只有再次点击或者允许进行操作时，才能获取剪切板的内容，这是浏览器的安全策略导致的。
方式②(间接获取)
拷贝内容后，在页面中设置一个输入框，现将拷贝的内容粘贴到输入框中，然后获取输入框的值从而获取拷贝的内容。
<a-row :gutter="3" style="height: 30px"><a-col :span="22"><a-input v-model="pasteValue" placeholder="请粘贴要生成的内容"/></a-col><a-col :span="1"><a-button @click="setData"><template #icon><icon-copy/></template></a-button></a-col></a-row>const setData = () => {const str = pasteValue.value.split(' ')str.forEach(item => {if (item) {data.value.push({name: item})}})pasteValue.value = ""
}获取拷贝的内容通过空格进行分割，从而获取拷贝的数据列表。
3.总结
navigator.clipboard 是一个 Web API，允许开发者访问用户的剪贴板内容，主要用于复制和粘贴操作。这个接口提供了一些异步方法，能够安全地读写剪贴板数据。
writeText(text)
- 描述: 将文本写入剪贴板。
- 参数:
text- 要复制的字符串。 - 返回值: 返回一个
Promise，在成功复制后解决。navigator.clipboard.writeText('Hello, World!').then(() => {console.log('文本已复制到剪贴板！');}).catch(err => {console.error('复制失败: ', err);});
readText()
- 描述: 从剪贴板读取文本。
- 返回值: 返回一个
Promise，解决为剪贴板中的文本。navigator.clipboard.readText().then(text => {console.log('剪贴板中的文本: ', text);}).catch(err => {console.error('读取失败: ', err);});
使用注意事项
- 安全性: 访问剪贴板需要在 HTTPS 环境中进行，或在 localhost 上。
- 用户交互: 大多数浏览器要求在用户的交互（如点击按钮）后才能执行剪贴板操作，以防止滥用。
详细示例
<button id="copyButton">复制文本</button>
<button id="pasteButton">粘贴文本</button>
<p id="output"></p><script>document.getElementById('copyButton').addEventListener('click', () => {navigator.clipboard.writeText('Hello, Clipboard!').then(() => {console.log('文本已复制！');});});document.getElementById('pasteButton').addEventListener('click', () => {navigator.clipboard.readText().then(text => {document.getElementById('output').textContent = text;});});
</script>