google-apps-script - 使用 Google 的“应用程序脚本”在侧边栏中创建复制到剪贴板按钮

Question

有没有办法使用谷歌在侧边栏中创建复制到剪贴板按钮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

标签： google-apps-scriptclipboardsidebar

Answer 1

修改点：

• From The second function is javascipt.，在您的脚本中，如果copyToClipboard()将其放入脚本编辑器的 HTML 文件中，则在这种情况下，html您的脚本中不包含该函数。这样，就会发生这样的错误。
• 或者，如果copyToClipboard()放入脚本编辑器的 Google Apps Script 文件中，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()加载 HTML 和 Javascript 。index.html

笔记：

• 如果要使用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);
      }
    

参考：

• 类 HtmlService
• HTML 服务：创建和提供 HTML