使用 Google 的“Apps 脚本”在边栏中创建复制到剪贴板按钮

Create a copy to clipboard button in Sidebar using Google's `Apps Script`

有没有办法使用 Google 的 Apps Script 在补充工具栏中创建复制到剪贴板按钮？

我当前的代码如下，但是复制按钮不起作用：

function createCalendarEvent() {
  
    var html = HtmlService.createHtmlOutput()
      .setTitle("Πληροφορίες για Ημερολόγιο")
      .setContent('<div><p id="item-to-copy">Test</p>' + '\n\n<button onclick='+"copyToClipboard()"+'>Copy</button></div>')
      var ui = SpreadsheetApp.getUi(); // Or DocumentApp or SlidesApp or FormApp.
      ui.showSidebar(html);
}

function copyToClipboard() {
    const str = document.getElementById('item-to-copy').innerText;
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');

document.body.removeChild(el); }

第二个函数是javascipt

你能帮帮我吗？

编辑 当我在浏览器上单击 F12 时，出现以下错误：

Uncaught ReferenceError: copyToClipboard is not defined
    at HTMLButtonElement.onclick (userCodeAppPanel:1)
onclick @ userCodeAppPanel:1

修改点：

  • 从 The second function is javascipt. 开始，在您的脚本中，如果 copyToClipboard() 被放入脚本编辑器的 HTML 文件中，在这种情况下，您脚本中的 html 不会'包括功能。这样就出现了这样的错误。
  • 或者，如果 copyToClipboard() 被放入脚本编辑器的 Google Apps 脚本文件，copyToClipboard() 不能是 HTML 端的 运行。这样就出现了这样的错误。

为了运行copyToClipboard()，特提出如下修改。

修改后的脚本：

HTML&Javascript 边:

请将以下脚本复制并粘贴到 Google Apps 脚本项目中脚本编辑器的 HTML 文件中。文件名为 index.html.

<div>
  <p id="item-to-copy">Test</p>
  <button onclick="copyToClipboard()">Copy</button>
</div>
<script>
function copyToClipboard() {
  const str = document.getElementById('item-to-copy').innerText;
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}
</script>

Google Apps 脚本端：

请将以下脚本复制并粘贴到 Google Apps 脚本项目中脚本编辑器的 Google Apps 脚本文件中。

function createCalendarEvent() {
  var html = HtmlService.createHtmlOutputFromFile("index").setTitle("Πληροφορίες για Ημερολόγιο")
  var ui = SpreadsheetApp.getUi(); // Or DocumentApp or SlidesApp or FormApp.
  ui.showSidebar(html);
}
  • 当 createCalendarEvent() 为 运行 时，脚本从 index.html 文件加载 HTML 和 Javascript。

注：

  • 如果要使用setContent，也可以使用下面的脚本

    • HTML&Javascript 边:

        <script>
  function copyToClipboard() {
    const str = document.getElementById('item-to-copy').innerText;
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  }
  </script>

    • Google Apps 脚本端：

        function createCalendarEvent() {
    var javascript = HtmlService.createHtmlOutputFromFile("index").getContent();
    var htmlData = `<div><p id="item-to-copy">Test</p><button onclick="copyToClipboard()">Copy</button></div>${javascript}`;
    var html = HtmlService.createHtmlOutput()
    .setTitle("Πληροφορίες για Ημερολόγιο")
    .setContent(htmlData)
    var ui = SpreadsheetApp.getUi(); // Or DocumentApp or SlidesApp or FormApp.
    ui.showSidebar(html);
  }

参考文献：