vue中获取剪切板中的内容

目录

1.说明

2.示例

3.总结

1.说明

在系统中的画面或者时外部文件中进行拷贝处理后，在页面中可以获取剪切板的内容。

2.示例

方式①(直接获取)

// 异步函数获取剪切板内容
async function getClipboardContent(ev: any) {
  try {
    ev.preventDefault()
    const clipboardText = await navigator.clipboard.readText();
    const str = clipboardText.split(' ')
    str.forEach(item => {
      if (item) {
        data.value.push({name: item})
      }
    })
    // 处理剪切板内容
    console.log(str);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
    return null;
  }
}

点击页面中的按钮，触发上述方法，通过navigator.clipboard.readText()方法，获取剪切板的内容。使用这个方法出现这样的问题，当从系统的页面中拷贝内容时，通过上述方法可以直接读取剪切板的内容，但是从系统外部的文件中拷贝内容时，点击页面的按钮触发这个方法时，会出现一个粘贴按钮，或者操作提示，只有再次点击或者允许进行操作时，才能获取剪切板的内容，这是浏览器的安全策略导致的。

方式②(间接获取)

拷贝内容后，在页面中设置一个输入框，现将拷贝的内容粘贴到输入框中，然后获取输入框的值从而获取拷贝的内容。

      <a-row :gutter="3" style="height: 30px">
        <a-col :span="22">
          <a-input v-model="pasteValue" placeholder="请粘贴要生成的内容"/>
        </a-col>
        <a-col :span="1">
          <a-button @click="setData">
            <template #icon>
              <icon-copy/>
            </template>
          </a-button>
        </a-col>
      </a-row>

const setData = () => {
  const str = pasteValue.value.split(' ')
  str.forEach(item => {
    if (item) {
      data.value.push({name: item})
    }
  })
  pasteValue.value = ""
}

 获取拷贝的内容通过空格进行分割，从而获取拷贝的数据列表。

3.总结

navigator.clipboard 的说明

navigator.clipboard 是一个 Web API，允许开发者访问用户的剪贴板内容，主要用于复制和粘贴操作。这个接口提供了一些异步方法，能够安全地读写剪贴板数据。

writeText(text)

• 描述: 将文本写入剪贴板。
• 参数: text - 要复制的字符串。
• 返回值: 返回一个 Promise，在成功复制后解决。

  navigator.clipboard.writeText('Hello, World!')
    .then(() => {
      console.log('文本已复制到剪贴板！');
    })
    .catch(err => {
      console.error('复制失败: ', err);
    });
  

readText()        

• 描述: 从剪贴板读取文本。
• 返回值: 返回一个 Promise，解决为剪贴板中的文本。

  navigator.clipboard.readText()
    .then(text => {
      console.log('剪贴板中的文本: ', text);
    })
    .catch(err => {
      console.error('读取失败: ', err);
    });
  

使用注意事项

• 安全性: 访问剪贴板需要在 HTTPS 环境中进行，或在 localhost 上。
• 用户交互: 大多数浏览器要求在用户的交互（如点击按钮）后才能执行剪贴板操作，以防止滥用。

详细示例

<button id="copyButton">复制文本</button>
<button id="pasteButton">粘贴文本</button>
<p id="output"></p>

<script>
  document.getElementById('copyButton').addEventListener('click', () => {
    navigator.clipboard.writeText('Hello, Clipboard!')
      .then(() => {
        console.log('文本已复制！');
      });
  });

  document.getElementById('pasteButton').addEventListener('click', () => {
    navigator.clipboard.readText()
      .then(text => {
        document.getElementById('output').textContent = text;
      });
  });
</script>