但是document.execCommand api已经废弃，还有其他好的方法吗

是的，`document.execCommand` 方法已经被标记为过时，推荐使用 `Clipboard` API 来操作剪切板。下面是使用 `Clipboard` API 实现往剪切板中放入文字的代码：

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
}

// 调用示例
copyToClipboard('Hello, world!');

这个函数使用 `navigator.clipboard` 对象的 `writeText` 方法将文本参数写入剪切板中。这个方法返回一个 Promise，可以使用 `await` 关键字等待其完成。如果写入成功，控制台会输出一条消息，如果写入失败，控制台会输出错误信息。需要注意的是，这个方法需要在 HTTPS 网站上运行才能正常使用。

相关问题

vue的navigator.clipboard.writeText报错 Cannot read properties of undefined (reading 'writeText')

### Vue 中 `navigator.clipboard.writeText` 出现 `Cannot read properties of undefined (reading 'writeText')` 错误解决方案

当在 Vue 应用程序中遇到 `navigator.clipboard.writeText` 报错提示 `Cannot read properties of undefined (reading 'writeText')` 时，这通常是因为浏览器环境不支持 Clipboard API 或者存在安全策略限制。

#### 处理方案一：检查并补充兼容性判断逻辑
为了确保代码能在不同环境中稳定运行，在调用 `navigator.clipboard.writeText()` 方法前应先检测其是否存在：

function copyToClipboard(text) {
    if (typeof navigator.clipboard !== 'undefined' && typeof navigator.clipboard.writeText !== 'undefined') {
        try {
            navigator.clipboard.writeText(text).then(() => {
                console.log('文本已成功复制到剪贴板');
            }).catch(err => {
                console.error('未能复制文本:', err);
            });
        } catch (error) {
            console.error('发生异常:', error);
        }
    } else {
        fallbackCopyTextToClipboard(text); // 提供降级方案
    }
}

此段代码会优先尝试使用现代浏览器提供的 Clipboard API 进行操作；如果当前环境下不可用，则转向其他方式实现相同功能[^1]。

#### 方案二：针对特定场景下的特殊处理——微信浏览器适配
对于某些特殊情况如微信内置浏览器可能无法正常使用标准 Clipboard API 的情况，可采用如下替代方法来完成相似的功能需求:

<template>
  <!-- ... -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const inputRef = ref<HTMLInputElement | null>(null);

onMounted(() => {
  const handleCopyClick = () => {
      let aux = document.createElement("input");
      aux.setAttribute("value", "要复制的内容");
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy"); // 使用 execCommand 执行复制命令
      document.body.removeChild(aux);
      
      alert("内容已经复制！");
  };

  // 绑定事件监听器或其他业务逻辑...
});
</script>

这种方法利用了旧版的 `document.execCommand("copy")` 接口作为兜底措施，虽然这种方式已被废弃但仍可在部分老旧平台或受限环境中发挥作用[^3]。

另外需要注意的是，由于安全性原因，Clipboard API 只允许 HTTPS 协议下以及 localhost 下的工作。因此建议开发者们尽可能保证应用部署于加密连接之上，并注意测试过程中是否因为网络配置而导致的问题[^2]。