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

Question

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

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

我试图做的是获取数据 [“isbn”] 并将其存储为 foo 的 (input 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/

Copy to Clipboard 最流行的方法是涉及 Document.execCommand，这似乎已被弃用。

标签： javascripthtmlnode.jsejs