向HTML模板添加属性报错：“Object does not allow properties to be added or changed”

我一眼就看出问题所在啦——你用错了HtmlService的核心方法！HtmlService.createHtmlOutputFromFile()返回的是不可修改的HtmlOutput对象，这就是为什么你没法给它添加自定义属性（比如你的表格数据）。要实现给模板传数据，得用专门的模板创建方法：HtmlService.createTemplateFromFile()。

正确的实现逻辑 #

• 用createTemplateFromFile()创建可编辑的HtmlTemplate对象，这个对象允许你自由添加自定义属性
• 将表格数据赋值给模板对象的属性
• 调用模板的evaluate()方法，把它转换成最终的HtmlOutput对象，再用来显示对话框

修正后的完整代码 #

function showDialog() {
  // 创建可编辑的动态模板对象
  var htmlTemplate = HtmlService.createTemplateFromFile('index'); 
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  var range = sheet.getDataRange();
  var values = range.getValues();
  
  // 现在可以安全地给模板添加数据属性了
  htmlTemplate.spreadsheetData = values; 
  
  // 将模板转换为可显示的HtmlOutput并弹出对话框
  var htmlOutput = htmlTemplate.evaluate();
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '表格数据预览');
}

对应的index.html模板示例（如何渲染传入的数据） #

你需要在HTML文件里用<?= ?>或<? ?>语法来引用模板中的数据，比如：

<!DOCTYPE html>
<html>
  <body>
    <h2>Google表格数据</h2>
    <table border="1" cellpadding="5">
      <? for (var rowIndex = 0; rowIndex < spreadsheetData.length; rowIndex++) { ?>
        <tr>
          <? for (var colIndex = 0; colIndex < spreadsheetData[rowIndex].length; colIndex++) { ?>
            <td><?= spreadsheetData[rowIndex][colIndex] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

简单总结下：createHtmlOutputFromFile是直接生成静态HTML输出，而createTemplateFromFile是创建支持数据注入的动态模板，这才是你需要的传数据方式～

内容的提问来源于stack exchange，提问作者JianNCI