复制内容/组件到剪切板

复制内容/组件到剪切板

需求：点击按钮复制组件代码

把组件内容写在public文件里

按钮的方法：

  copyImportedFileContent(val) {
  // 传入组件名字  对应public文件里的txt文件
      axios
        .get(`../../../data/柱图/文本/${val}.txt`)
        .then((res) => {
          const componentCode = res.data;
          navigator.clipboard
            .writeText(componentCode)
            .then(() => {
              alert('组件内容已成功复制！');
            })
            .catch((err) => {
              console.error('复制文件内容失败：', err);
            });
        })
        .catch((err) => {
          console.error('加载文件失败：', err);
        });
    },

成功复制！粘贴就好啦

---

后续：
打包的时候发现方法失效，好多浏览器不支持navigator.clipboard.writeText方法，为了解决这个问题，你可以在调用 navigator.clipboard.writeText 方法之前，先检查一下浏览器是否支持该方法。你可以使用以下代码进行检查：

if (navigator.clipboard && navigator.clipboard.writeText) {
  // 调用 writeText 方法
} else {
  // 处理浏览器不支持的情况
  console.error('当前浏览器不支持 navigator.clipboard.writeText 方法');
}

改用下面的方法，打包部署后发现功能正常。
这个方法使用 document.execCommand，通过创建一个隐藏的 input 或 textarea 元素，将文本内容设置为其值，然后选中并执行复制命令。（长文本建议使用textarea ）

 copyImportedFileContent(val) {
      axios
        .get(`./data/other/文本/${val}.txt`)
        .then((res) => {
          // 获取要复制的内容
          var textArea = document.createElement('textarea');
          textArea.value = res.data;
          document.body.appendChild(textArea);
          textArea.select();
          document.execCommand('copy');
          document.body.removeChild(textArea);
          // 提示复制成功
          alert('内容已复制到剪贴板');
        })
        .catch((err) => {
          console.error('加载文件失败：', err);
        });
    },