html5的网站设计,企业建网站开发,企业宣传册模板排版,网站制图软件文章目录 一、navigator.clipboard.writeText二、方案落地总结 一、navigator.clipboard.writeText
navigator.clipboard.writeText 是一个Web API#xff0c;它允许网页脚本将文本数据写入用户的系统剪贴板。这个API是异步的#xff0c;并且设计用于提高安全性和用户体验它允许网页脚本将文本数据写入用户的系统剪贴板。这个API是异步的并且设计用于提高安全性和用户体验因为它要求网页必须是在用户交互如点击或按键事件的上下文中才能访问剪贴板。
样例代码如下
// 假设你有一个按钮用户点击它会触发文本复制
document.getElementById(copyButton).addEventListener(click, async function() {// 要复制的文本const textToCopy 这是一段要复制到剪贴板的文本;try {// 使用 navigator.clipboard.writeText 复制文本await navigator.clipboard.writeText(textToCopy);console.log(文本已成功复制到剪贴板);} catch (err) {console.error(无法复制文本, err);}
});二、方案落地
使用上面的方案会出现部署到生产环境和测试环境不生效换成下面方法做兼容就可以了
templatediv classboxdiv classgameId{{ resStr }}/divbutton idcopyButton clickcopyText复制内容/button/divel-dialogv-modeldialogVisibletitle提示width500:before-closehandleClosespan stylecolor: red文本已复制/spantemplate #footerdiv classdialog-footerel-buttonstylewidth: 50pxtypeprimaryclickdialogVisible false确定/el-button/div/template/el-dialog
/templatescript setup
import { useRoute } from vue-router;
import { ref } from vue;
const route useRoute();
const resStr ref();
const str Object.values(route.query).join();
resStr.value JSON.parse(str).join(,);const dialogVisible ref(false);// 开发环境这个版本可以用生产环境需要做兼容性判断
// 复制文本
// const copyText () {
// try {
// navigator.clipboard.writeText(resStr);
// dialogVisible.value true;
// } catch (err) {
// ElMessage.error(文本复制失败);
// }
// };// 这个是用于兼容性判断 生成环境和测试环境都兼容
async function copyText() {if (clipboard in navigator) {try {await navigator.clipboard.writeText(resStr.value);dialogVisible.value true;} catch (err) {}} else {// 回退方案使用document.execCommand(copy)const textArea document.createElement(textarea);textArea.value resStr.value;document.body.appendChild(textArea);textArea.select();try {const successful document.execCommand(copy);const msg successful ? successful : unsuccessful;} catch (err) {}document.body.removeChild(textArea);}
}
/script总结
总之JavaScript中复制文本到剪贴板的功能可以通过多种方法实现开发者应根据具体需求和目标浏览器的兼容性来选择最合适的方法。同时还需要注意安全性和用户体验方面的考虑。
