Google 表格应用程序脚本无法处理 CSS 样式答案

【问题标题】：Google sheets app script fails to process CSS stylingGoogle 表格应用程序脚本无法处理 CSS 样式
【发布时间】：2021-11-07 02:42:29
【问题描述】：

我在谷歌电子表格中有一张图片。按下按钮会触发脚本，该脚本应该打开一个程式化的表格。相反，它会打开一个表格并且无法对其应用 CSS 样式。我阅读了有关制作单独文件以进行样式设置并将包含在主 HTML 文件中的 Google 文档，如下所示

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

我做到了。我得到一张带有纯文本的表格。

如何让脚本真正处理 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')
      
}

带有 CSS 表格的 stylesheet.html 文件

<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 和一张桌子

<!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>

【问题讨论】：

标签： css user-interface google-apps-script modal-dialog include

【解决方案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')    
}

输出：

【讨论】：