Google Sheets Apps Script处理CSS样式失效问题求助

问题原因 #

你遇到的是两个常见的Google Apps Script HTML模板渲染错误：

• 你使用了<?!= ?>模板标记引入CSS，但直接调用createHtmlOutputFromFile只会读取静态HTML内容，不会解析模板标记，导致引入代码直接以文本展示
• 第一个表格的样式绑定写错了属性，把class写成了style，就算CSS加载成功也不会生效

修改步骤 #

1. 修改gs文件中的openDialog方法，改用模板渲染方法createTemplateFromFile读取HTML文件，调用evaluate()方法解析模板标记后再生成输出内容
2. 修正stundu_laiki.html文件中的表格属性，把第一个table的style="w3-table-all"改为class="w3-table-all"
3. 删除引入语句前后的多余星号和注释，保证模板标记格式正确

调整后的gs文件代码 #

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

function openDialog() {
  // 改用模板读取+解析的方式生成HTML
  var html = HtmlService.createTemplateFromFile('Stundu_laiki')
       .evaluate()
       .setHeight(600);
  SpreadsheetApp.getUi()
      .showModalDialog(html, 'Stundu laiki')
}

调整后的stundu_laiki.html关键部分代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('stylesheet'); ?>
  </head>
  <body>
    <!-- 把style属性改为class -->
    <table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
    <!-- 剩余表格内容保持不变即可 -->

内容的提问来源于stack exchange，提问作者Liepājas Liedaga vidusskola