Google 表格应用脚本无法处理 CSS 样式

Question

我在 google 电子表格中有一张图片。按下按钮会触发脚本，该脚本应该打开程式化的 table。相反，它会打开一个 table 并且无法对其应用 CSS 样式。我阅读了 Google 文档，了解如何制作一个单独的文件来设置样式并在主 HTML 文件中添加包含内容，如下所示

//   <?!= include('stylesheet'); ?>

我做到了。我得到一个 table 作为纯文本。

如何使脚本真正处理 CSS 样式？

gs 文件：

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

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
       .setHeight(600);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Stundu laiki')
      
}

stylesheet.html 文件 CSS for tables

<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>

stundu_laiki.html 与 table

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    **<?!= include('stylesheet'); ?>**
  </head>
  <body>
    <table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
            <tr>
              <td width="23%">1.</td>
              <td width="77%">8:30 - 9:10</td>
            </tr>
            <tr>
              <td>2.</td>
              <td>9:20 - 10:00</td>
            </tr>
            <tr>
              <td>3.</td>
              <td>10:10 - 10:50</td>
            </tr>
            <tr>
              <td>4.</td>
              <td>11:05 - 11:45</td>
            </tr>
            <tr>
              <td>5.</td>
              <td>12:00 - 12:40</td>
            </tr>
            <tr>
              <td>6.</td>
              <td>13:10 - 13:50</td>
            </tr>
            <tr>
              <td>7.</td>
              <td> 14:00 - 14:40</td>
            </tr>
            <tr>
              <td>8.</td>
              <td>14:50 - 15:30</td>
            </tr>
            <tr>
              <td>9.</td>
              <td>15:35 - 16:15</td>
            </tr>
          </table>

<h2> Saīsināto dienu stundu laiki</h2>

<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
    <tr>
      <td width="23%">1.</td>
      <td width="77%">8:30 - 9:00</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>9:10 - 9:40</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>9:50 - 10:20</td>
    </tr>
    <tr>
      <td>4.</td>
      <td>10:35 - 11:05</td>
    </tr>
    <tr>
      <td>5.</td>
      <td>11:20 - 11:50</td>
    </tr>
    <tr>
      <td>6.</td>
      <td>12:20 - 12:50</td>
    </tr>
    <tr>
      <td>7.</td>
      <td> 13:00 - 13:30</td>
    </tr>
    <tr>
      <td>8.</td>
      <td>13:40 - 14:10</td>
    </tr>
    <tr>
      <td>9.</td>
      <td>14:15 - 14:45</td>
    </tr>
  </table> 
  </body>
</html>

Answer 1

使用 createTemplateFromFile 而不是 evaluate 你的 html。请参阅下面的最终脚本。

最终脚本：

function openDialog() {
  var html = HtmlService.createTemplateFromFile('stundu_laiki')
    .evaluate()
    .setHeight(600);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'Stundu laiki')    
}

Google 表格应用脚本无法处理 CSS 样式

Google sheets app script fails to process CSS styling

css

user-interface

google-apps-script

modal-dialog

include

最终脚本：

输出：