将文本复制到剪贴板：无法读取未定义读数的属性 'writeText'

Question

我有一个按钮

当我点击复制时

copyImageLinkText({ mouseenter, mouseleave }, e) {
  this.showCopiedText = !this.showCopiedText
  navigator.clipboard.writeText(this.imageLink)

  clearTimeout(this._timerId)
  mouseenter(e)
  this._timerId = setTimeout(() => mouseleave(e), 1000)
},

这条线似乎在我的 MacBook Pro 上本地完美运行

navigator.clipboard.writeText(this.imageLink)

当我构建并将它部署到我的开发服务器时，它不工作。

TypeError: Cannot read properties of undefined (reading 'writeText')

Answer 1

navigator.clipboard 的使用需要安全来源。因此，如果您的开发环境是通过 HTTP 提供服务的，那么剪贴板方法将不可用。

根据 MDN Clipboard docs: "This feature is available only in secure contexts (HTTPS)"

也许您可以检查此方法是否适用于 window.isSecureContext，并相应地禁用“复制文本”按钮。

解决方法

最好的选择是在您的开发环境中使用 HTTPS。

但是由于您要求解决方法，这里有一个（非常老套的）工作示例。它使用 Document.exec command, which is being deprecated in favor of ClipboardAPI.

function unsecuredCopyToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Unable to copy to clipboard', err);
  }
  document.body.removeChild(textArea);
}

然后您可以使用 navigator.clipboard == undefined 来使用回退方法，否则在支持的情况下使用正常的 navigator.clipboard.writeText(...) 函数。

Answer 2

最好使用 async 并将代码放在 try catch 块中。

async copyCode() {
 try {
     await navigator.clipboard.writeText(this.input);
 } catch (e) {
     console.log(e);
 }
}

将文本复制到剪贴板：无法读取未定义读数的属性 'writeText'

Copy text to clipboard: Cannot read properties of undefined reading 'writeText'

javascript

copy-paste

vue.js

vue-component

vuejs2

解决方法