navigator.clipboard 兼容问题

[luocong2016]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

• 已阅读 文档.
• 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
• 已在 Issues 中搜索了相关的关键词
• 不是 ant design vue 组件库的 Bug

描述 Bug

navigator.clipboard 可能是 void 0

复现 Bug

/src/utils/copyTextToClipboard.ts 兼容问题

import { message } from 'ant-design-vue';

export function copyText(text: string, prompt: string | null = '已成功复制到剪切板!') {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(
      function () {
        prompt && message.success(prompt);
      },
      function (error: Error) {
        message.error('复制失败!' + error.message);
      },
    );
    return;
  }
  if (document.execCommand) {
    const textArea = document.createElement('textarea');
    // textArea.style.display = 'none'; // 无法拷贝
    textArea.style.height = '0';
    textArea.style.padding = '0';
    textArea.value = text;
    textArea.setAttribute('readonly', 'readonly');
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    return;
  }
  console.log(text);
}

系统信息

• 操作系统:
• Node 版本:
• 包管理器 (npm/yarn/pnpm) 及其版本:

[luocong2016]

设计的也有问题，无论成败都会提示去修改文件

详细描述下： 说设计有问题是，因为成功还是失败，都提示去改文件配置。并不是 Promise 的语法糖调用方式

[wangjue666]

设计的也有问题，无论成败都会提示去修改文件

什么浏览器环境下能复现呢？

[luocong2016]

Chrome 已是最新版本
版本 119.0.6045.200（正式版本） （64 位）

浏览器兼容

问题依然存在，我猜测是浏览器设置的问题。但是我们不能强制用户去改配置。
所以，以下是我封装的 Promise 函数。

/**
 * 浏览器拷贝
 * @param content string
 * @returns Promise<void>
 */
export function copyText(content: string) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(content);
  }
  if (Reflect.has(document, "execCommand")) {
    return new Promise<void>((resolve, reject) => {
      try {
        const textArea = document.createElement("textarea");
        textArea.value = content;
        // 在手机 Safari 浏览器中，点击复制按钮，整个页面会跳动一下
        textArea.style.width = "0";
        textArea.style.position = "fixed";
        textArea.style.left = "-999px";
        textArea.style.top = "10px";
        textArea.setAttribute("readonly", "readonly");
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand("copy");
        document.body.removeChild(textArea);
        resolve();
      } catch (e) {
        reject(e);
      }
    });
  }
  // throw Error('The previous methods were not compatible.');
  return Promise.reject('The previous methods were not compatible.');
}

[wangjue666]

之前我是想直接用这个包来处理的，但是vue3不兼容ie11,这个包也提示直接使用最新的api即可，就用navigator.clipboard来调用了

[wangjue666]

@luocong2016 意思你现在调用就是没有 navigator.clipboard这个对象吗？

[luocong2016]

不是代码兼容问题，之前我就一直怀疑 的 chrome 权限问题，用户可能关闭了该权限。
我尝试了几次，发现开关 clipboard feature 权限，但是还是没有任何效果。

补充：
后面我是这么处理的

1. 打开 chrome://flags，Reset all
2. 再设置 Clipboard unsanitized read and write：Enabled
3. 重启 chrome

我感觉后面版本的 chrome 默认关闭了很多权限，包括：蓝牙、摄像头等全部被关闭了。
这个可能是个坑。要不就要提示用户打开

[luocong2016]

看ant-pro 设计的是这样的

后面测试了是可以的，

[wangjue666]

啊 加个try catch就能调用通了？

[luocong2016]

不是啊， 人家设计的是 async function。 你设计的Promise,存在问题。前面已经提到了，不管是 then catch 都按finally 执行

[wangjue666]

不是啊， 人家设计的是 async function。 你设计的Promise,存在问题。前面已经提到了，不管是 then catch 都按finally 执行

ok, 那你提个PR吧，我来merge