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 的说明

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>