如何将 Clipboard.js 库导入 Google App 脚本？

Question

由于在 Google 应用程序中禁止操作剪贴板，我想通过使用 Clipboard.js 库找到解决方法。

我的问题是：

1.我应该如何将 Clipboard.js 库导入 Google App 脚本？

2。以及如何调用其他页面中的函数（例如，尝试从 index.html 中的 BMI.gs 调用函数 calculateWeight()?

我试过的：

我已尝试将 Clipboard.js 的源代码粘贴到名为 Clipboard.js 的文件中。html 并将所有内容放入标签中。

我要实现的目标：

单击 "COPY" 按钮复制文本字符串。

>>what I want to achieve

我花了几个小时寻找解决方案，但仍然找不到相关信息。任何帮助将不胜感激。谢谢！

Answer 1

您的脚本可以有多个 html 文件，根据 HTML Services: Best Practices，您应该有 HTML、CSS 和（客户端）Javascript 在单独的文件中。因此，在您的情况下，您的 index.html 文件将包含所有 HTML 代码，并且会添加几行。它可以如下所示开始：

<!DOCTYPE html>
<html>
  <head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>
    <?!= include('myCSS'); ?>
    <title>Give it a Title</title>
  </head>
  <body>
      ...
      All the Body stuff
      ...
  </body>
    <?!= include('myScript'); ?>
</html>

此行的顶部包含来自托管位置的剪贴板 JS。我通过网络搜索 clipboard.js 发现了这一点。这是我访问 clipboard.js 库的地方，下面有一行：

<?!= include('myCSS'); ?>

在服务器端文件（.gs 文件）中，我有以下内容，以便我可以包含我在 doGet() 函数中加载的文件中的其他 HTML 文件：

function include(filename) {
  return HtmlService.createTemplateFromFile(filename).evaluate()
      .getContent();
}

我正在使用此代码在我的 doGet 中加载 HTML 以使用模板 HTML:

function doGet(passed) {

  if(passed.parameter.festival && passed.parameter.year){
    passedParameter = passed.parameter.festival + ' ' + passed.parameter.year;
  }

  var result=HtmlService.createTemplateFromFile('index').evaluate()
        .setTitle('My Title')
        .setWidth(1285)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return result;
}

在文件下拉菜单下，您创建一个名为 myCSS 的新 HTML 文件，并在其中添加您的 CSS：

<style>
  h1 {
     color: #0F6B5E;
     font-size: 300%;
     text-align:center;
     vertical-align: middle;
     font-family: 'Raleway', sans-serif;
     font-weight:bold;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
  }
</style>

创建一个名为 myScript 的新 HTML 文件，并在此处添加您要在 HTML 页面中使用的脚本。这是客户端脚本，与服务器端脚本相对，服务器端脚本都在脚本文件中。（HTML 文件将在文件列表中显示 .html 扩展名，而服务器端脚本文件将具有 .gs）如果您的 calculateWeight() 函数用于计算和显示 HTML 页面，然后把它放在这个文件中：

<script>
  //Script to load after the page has loaded
  $(function() {
  google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
      });

  calculateWeight() {
    //code goes here
  }

function showMenuYear(menuItems) {
  var list = $('#optionListYear');
  var desiredValue = '<?!= passedParameter ?>';

  list.find('option').remove();  // remove existing contents

  list.append('<option value="-1">Select a Festival and Year</option>');

  for (var i = 0; i < menuItems.length ; i++) {
    list.append('<option value=' + menuItems[i].sheetrow + '>' + menuItems[i].fullFestival + '</option>');
    if (menuItems[i].fullFestival === desiredValue){
      list.val(menuItems[i].sheetrow);
    }
  }

  setFormList();

}
function setFormList() {
//    alert('In setFormList ');
//    alert($('#optionListYear').val());

  var replacement = document.getElementById("OverallGrid");
  replacement.innerHTML = "Retrieving Registrations...";

  if ($('#optionListYear').val() === "-1") {
//    if(passedData.year && passedData.festival){replacement.innerHTML = passedData.festival & " " & passedData.year;};
    replacement.innerHTML = "Select a Festival/Year above.";
    return;
  }
  google.script.run.withSuccessHandler(showRegistrationsTable).withFailureHandler(loadFailed).getValidRegistrations($('#optionListYear').val());
  }

  function loadFailed(error){
    var replacement = document.getElementById("OverallGrid");

    var displayMessage = "Error loading data: " + error.name + ' ' + error.message;

    if (error.message.includes("is missing (perhaps it was deleted?)") ) {
      displayMessage = "You do not have access to these registrations." 
    }

    replacement.innerHTML = displayMessage;

  }
</script>

在此代码中，以 google.script.run 开头的行将运行服务器端函数，如果需要，将变量传递给该函数。如果成功，withSuccessHandler(successFunction) 中定义的客户端函数将用于传递的任何返回数据。所以在我的示例中，showMenuYear(menuItems) 函数在客户端是运行，menuItems 被设置为服务器端函数 getDropDownContent() 的返回值。如果Server端returns出错，则执行loadFailed(error)函数。这一切都来自行：

google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();

如何将 Clipboard.js 库导入 Google App 脚本？

How to import Clipboard.js library into Google App Script?

javascript

google-apps-script

clipboard.js