google-apps-script - 使用 Google 的 `Apps Script` 在侧边栏中创建复制到剪贴板按钮

Question

有没有办法使用 Google 的 Apps 脚本 在侧边栏中创建复制到剪贴板按钮？

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

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

Answer 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);
      }
    

引用文献:

• Class HtmlService
• HTML Service: Create and Serve HTML