js异步数据写剪切板失败—爬坑clipboard.js

阅读本文你将了解以下内容

• js中ajax数据返回写剪切板失效原理
• 如何实现异步数据写剪切板

背景

通常情况下用js写用户剪切板思路

function copyToClipboard(text) {
  // 1 创建一个input元素
  const inputElement = document.querySelector('#input');
  // 2 设置内容为input的value
  inputElement.value = text;
  // 3 选中input的内容
  input.select();
  // 4 执行document.execCommand('copy')，返回true，写入成功，false失败
  const isSuccess = document.execCommand('copy');
}

问题

没问题：用户点击按钮，执行copyToClipboard()函数
出问题：用户点击按钮，发送ajax网络请求，请求回调中执行copyToClipboard()函数
场景：所有ios手机，safari浏览器

错解❌

设置ajax请求为同步的：尝试了失败
因为ios中ajax同步不被支持，会阻塞用户交互

正解✅

使用新的拷贝方法：navigator.clipboard

• 拷贝同步数据

navigator.clipboard.writeText(value)
  .then(() => {
    showToast('数据拷贝成功');
  })
  .catch((err) => {
    showToast(`拷贝失败${err?.message}`);
  });

• 如果是异步请求中的数据，将异步函数fetchData传入ClipboardItem初始化参数中

const promiseText = new ClipboardItem({
      'text/plain': new Promise((resolve) => {
        fetchData()
          ?.then((res) => {
            resolve(new Blob([convertToString(res)], { type: 'text/plain' }));
          })
          ?.catch((err) => {
            resolve('');
          });
      }),
    });

navigator.clipboard.write([promiseText]);