API буфера обмена, используемый в сочетании с Axios в событии клика

Question

TL;DR

Можно ли заставить API буфера обмена записывать текст из результата запроса на получение Axios в Safari, даже если это прямой результат пользовательского события?

---

Длинная версия

У меня есть событие нажатия асинхронной кнопки, и внутри этого события нажатия я использую Axios для получения HTML-кода другой страницы. Я хочу взять эту строку и сохранить ее в буфер обмена с помощью API буфера обмена.

Это работает в Chrome и Firefox, но в Safari есть некоторые проблемы, о которых я расскажу ниже.

Тестирование в:

• Хром 88.0.4324.192
• Фаерфокс 78.7.1
• Сафари 14.0.3

Ближайшая проблема SO, которую я мог найти в связи с такими вещами, - это Javascript/API буфера обмена/Safari iOS/NotAllowedError Message, но я чувствую, что мой вызов 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);
  }
});

Результат 1 в Сафари

• Запрос успешно сделан
• Ошибка записи в буфер обмена
  • NotAllowedError: запрос не разрешен агентом пользователя или платформой в текущем контексте, возможно, потому, что пользователь отказал в разрешении.

Мои мысли о результате 1

В то время я думал, что это сработает. Вызов является прямым результатом пользовательского события, и я просто передаю строку... хотя эта строка является результатом запроса на получение Axios. Когда это не сработало, я подумал, что должно быть что-то с запросом на получение, отбрасывающим разрешения.

---

Попытка 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);
  }
});

Результат 2 в Сафари

• Запрос успешно сделан
• Ошибка записи в буфер обмена
  • NotAllowedError: запрос не разрешен агентом пользователя или платформой в текущем контексте, возможно, потому, что пользователь отказал в разрешении.

Мои мысли о результате 2

Я был очень удивлен, когда мой случайный текст не скопировался. Когда попытка № 1 не удалась, я решил оставить запрос на получение, а просто передать writeText()какой-то случайный текст, никак не связанный с запросом на получение, просто чтобы посмотреть, скопируется ли он. Очевидно, что запрос на получение по-прежнему влияет на 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);
  }
});

Результат 3 в Сафари

• Текст успешно скопирован в буфер обмена

Мои мысли о результате 3

Что ж, я рад, что могу успешно копировать текст с помощью API буфера обмена в Safari. Однако я действительно хотел бы скопировать результат запроса на получение.

Answer 1

      copyButton.addEventListener('click', async (event) => {
    try {  
        const { ClipboardItem } = window;
        await navigator.clipboard.write([new ClipboardItem({ "text/plain": getUrl() })]).then(()=>console.log("copied"))
    } catch (error) {
        console.log(error);
    }
});
    
const getUrl = () => {
    const {data: html} = await axios.get('https://website-to-copy.com');
    return html;
}