无法将异步数据复制到剪贴板

Question

我正在进行 API 调用，其结果显示在表格中。比如说，列是“isbn”、“书名”、“出版年份”。每行都有一个“复制到剪贴板”图标，可以将 isbn 值复制到剪贴板。

具体来说，当用户单击复制按钮时，我无法将数据[“isbn”]复制到剪贴板中。

我试图做的是获取 data["isbn"] 并将其存储为 foo 的（输入 id = 'foo'）值。由于剪贴板功能可与输入等元素一起使用。

代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script>
async function books_data{

const response = await fetch('/books');
const data = await response.json();

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

document.getElementById("foo").value = val["JobID"];

cell1.innerHTML = data["isbn"];
cell2.innerHTML = data["name"];
cell3.innerHTML = data["year"];
cell4.innerHTML = '<button class="btn" data-clipboard-target="#foo"> Copy to clipboard </button>" ';

}
</script>
<div>
  <input id="foo" style="display: none">
...
...

</div>

我不清楚我哪里错了。我提到了这些： https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand，https://clipboardjs.com/

复制到剪贴板最流行的方法是涉及 Document.execCommand，该方法似乎已被弃用。

Answer 1

由于浏览器secure，

document.execCommand('copy')

和

Clipboard Api

必须由用户触发。
但是，我们可以模拟用户点击行为

promise(shareUrl.value).then((res) => {
  const el = document.createElement('div')

  el.setAttribute('data-clipboard-text', res.data) // it's not necessary if the value to be copied is passed to the second argument 'text' of ClipboardJS
  const clipboard = new ClipboardJS(el).on('success', (e) => {
    showSuccessToast('copy success')
    e.clearSelection()
    clipboard.destroy()
  })
  // or
  const clipboard = new ClipboardJS(el, { text: () => res.data }).on('success', (e) => {
    showSuccessToast('copy success')
    e.clearSelection()
    clipboard.destroy()
  })

  setTimeout(() => el.click()) // delay as appropriate
  el.remove()
})