将 <pre> 标签内容复制到 Vue.js 应用上的剪贴板

Question

我正在开发一个 chrome 扩展 vue 应用程序，我的目标是通过单击按钮将预标记部分的内容复制到剪贴板。我已经为 pre 标签定义了一个元素 ID，因此我可以使用 copyToClipboard() 方法获取内容。我的代码是这样的：

<template>
        <div>
          <button @click="copyToClipboard()">Copy To Clipboard</button>
        </div>

方法定义如下：

methods : {
copyToClipboard() {
      const textToCopy = document.getElementById('textToBecopied')
      textToCopy.select()
      document.execCommand('copy')
    }
}

我认为该方法执行正确，但我用作 .select 的函数抛出一个错误，表明它不是函数。谁有更好的主意来实现我正在寻找的东西？

Answer 1

HTMLInputElement.select() 方法选择 <textarea> 元素或包含文本字段的 <input> 元素中的所有文本。

document.getElementById('textToBecopied') - 是一个 <pre> 元素。

使用Node.textContent获取文本。并复制到剪贴板 - Clipboard API.

Answer 2

我通过获取预标记内容并将其复制到虚拟文本区域解决了这个问题，然后我能够使用 select 方法以及复制到剪贴板功能。

copyToClipboard() {
  const copyText = document.getElementById('textToBecopied').textContent
  const textArea = document.createElement('textarea')
  textArea.textContent = copyText
  document.body.append(textArea)
  textArea.select()
  document.execCommand('copy')
}

将 <pre> 标签内容复制到 Vue.js 应用上的剪贴板

Copy <pre> tag content to clipboard on on Vue.js App

javascript

select

copy

google-chrome-extension

vue.js