文本复制兼容方案最佳实现落地。

文章目录

一、navigator.clipboard.writeText
二、方案落地
总结

一、navigator.clipboard.writeText

navigator.clipboard.writeText 是一个Web API，它允许网页脚本将文本数据写入用户的系统剪贴板。这个API是异步的，并且设计用于提高安全性和用户体验，因为它要求网页必须是在用户交互（如点击或按键事件）的上下文中才能访问剪贴板。

样例代码如下：

c 复制代码

// 假设你有一个按钮，用户点击它会触发文本复制
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);
  }
});

二、方案落地

使用上面的方案会出现部署到生产环境和测试环境不生效，换成下面方法做兼容就可以了

c 复制代码

<template>
  <div class="box">
    <div class="gameId">{{ resStr }}</div>
    <button id="copyButton" @click="copyText">复制内容</button>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="500"
    :before-close="handleClose"
  >
    <span style="color: red">文本已复制</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          style="width: 50px"
          type="primary"
          @click="dialogVisible = false"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script 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中复制文本到剪贴板的功能可以通过多种方法实现，开发者应根据具体需求和目标浏览器的兼容性来选择最合适的方法。同时，还需要注意安全性和用户体验方面的考虑。