首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用Google的“`Apps”在Sidebar中创建一个复制到剪贴板按钮

使用Google的“`Apps”在Sidebar中创建一个复制到剪贴板按钮
EN

Stack Overflow用户
提问于 2020-12-31 00:13:55
回答 1查看 3.7K关注 0票数 2

有没有办法使用Google的Apps Script创建边栏中的复制剪贴板按钮

我的当前代码如下所示,但“复制”按钮无法工作:

代码语言:javascript
代码运行次数:0
运行
复制
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时,会得到以下错误:

代码语言:javascript
代码运行次数:0
运行
复制
Uncaught ReferenceError: copyToClipboard is not defined
    at HTMLButtonElement.onclick (userCodeAppPanel:1)
onclick @ userCodeAppPanel:1
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-31 01:11:38

修改要点:

  • The second function is javascipt.中,如果将copyToClipboard()放到脚本编辑器的HTML中,在这种情况下,脚本中的html不包含该函数。这样,就会发生这样的错误。
  • 或者,如果将copyToClipboard()放到脚本编辑器的Google脚本文件中,则copyToClipboard()不能从HTML运行。这样,就会发生这样的错误。

为了运行copyToClipboard(),我建议进行以下修改。

修改脚本:

HTML和Javascript方面:

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

代码语言:javascript
代码运行次数:0
运行
复制
<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脚本端:

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

代码语言:javascript
代码运行次数:0
运行
复制
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,还可以使用以下脚本。
代码语言:javascript
代码运行次数:0
运行
复制
- HTML&Javascript side:

HtmlService.createHtmlOutputFromFile("index").getContent();函数createCalendarEvent() { var javascript = 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();//或DocumentApp或SlidesApp或FormApp。ui.showSidebar(html);}

参考文献:

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65515143

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档