Vue实现获取剪切板内容的两种方法
作者：linab112
这篇文章主要为大家详细介绍了Vue实现获取剪切板内容的两种方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下
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>到此这篇关于Vue实现获取剪切板内容的两种方法的文章就介绍到这了,更多相关Vue获取剪切板内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！