时间戳

首页 > 解决方案 > 剪贴板 API 在点击事件中与 Axios 配合使用

javascript - 剪贴板 API 在点击事件中与 Axios 配合使用

问题描述

TL;博士

即使writeText()是用户事件的直接结果，是否可以让剪贴板 API 从 Safari 中的 Axios 获取请求的结果中写入文本？

长版

我有一个异步按钮单击事件，在该单击事件中，我使用 Axios 来获取另一个页面的 HTML。我想获取该字符串并使用剪贴板 API 将其保存到剪贴板。

这在 Chrome 和 Firefox 中有效，但在 Safari 中存在一些问题，我将在下面展示。

测试：

我能找到的与这类事情相关的最接近的 SO 问题是Javascript / Clipboard API / Safari iOS / NotAllowedError Message但我觉得我的 Clipboard API 调用是直接在用户事件中调用的。

尝试 1 在 Safari 中工作

copyButton.addEventListener('click', async (event) => {
  try {
    const {data: html} = await axios.get('https://website-to-copy.com');
    await navigator.clipboard.writeText(html);
    console.log('copy was a success');
  } catch (error) {
    console.log(error);
  }
});

Safari 中的结果 1

我对结果 1 的看法

当时我想这会奏效。该writeText()调用是用户事件的直接结果，我只是传入一个字符串......即使该字符串是 Axios 获取请求的结果。当它不起作用时，我认为 get 请求一定有什么东西会抛出权限。

尝试 2 在 Safari 中工作

copyButton.addEventListener('click', async (event) => {
  try {
    const {data: html} = await axios.get('https://website-to-copy.com');
    // throw in a random string thinking maybe something
    // in the get request is throwing Clipboard API off
    await navigator.clipboard.writeText('some random text to copy');
    console.log('copy was a success');
  } catch (error) {
    console.log(error);
  }
});

Safari 中的结果 2

我对结果 2 的看法

当我的随机文本没有复制时，我真的很惊讶。当尝试 #1 失败时，我决定保留 get 请求，但只是提供writeText()一些随机文本，无论如何都与 get 请求无关，只是为了看看它是否会复制。显然，get 请求仍在影响 Clipboard API。

尝试 3 开始在 Safari 中工作

copyButton.addEventListener('click', async (event) => {
  try {
    // remove get request and see if i can get anything to
    // copy to clipboard
    //const {data: html} = await axios.get('https://website-to-copy.com');
    await navigator.clipboard.writeText('some random text to copy');
    console.log('copy was a success');
  } catch (error) {
    console.log(error);
  }
});

Safari 中的结果 3

我对结果 3 的看法

好吧，我很高兴我可以在 Safari 中使用剪贴板 API 成功复制文本。但是我真的很想复制获取请求的结果。

标签： javascriptsafariaxioshtml5-clipboard-api

解决方案

推荐阅读