如何在生成PDF所用的HTML字符串中正确传入列表变量渲染表格

表格加载失败由两个核心问题导致：

• 模板字符串中直接插值JS对象数组时，数组会被默认调用toString()方法转成字符串，最终插入脚本的内容为loadTableData([object Object],[object Object]...)，属于非法JS语法，代码无法正常运行。
• 绝大多数HTML转PDF的工具默认不会执行HTML内的<script>标签逻辑，即便脚本语法正确，填充表格的代码也不会被触发。
• 原始代码还存在<body>标签闭合位置错误、重复写开标签的问题，会导致DOM结构异常。

优先选择在拼接HTML字符串阶段直接生成完整表格内容，完全去掉内嵌脚本逻辑，从根源规避PDF渲染环境不执行JS的问题，兼容性最好：

let amountList= [
  { name: 'store Amount', amount: 0 },
  { name: 'reinventAmount', amount: 0 },
  { name: 'Cost Amount', amount: 90 },
  { name: 'Total Amount', amount: 90 }
];

// 预生成表格行HTML
const tableContent = amountList.map(row => `
  <tr>
    <td>${row.name}</td>
    <td>${row.amount}</td>
  </tr>
`).join('');

let htmlStringUsedforPdf= `<html>
<body>
  <table border="1" cellpadding="6" cellspacing="0">
      <thead>
        <tr>
          <th>款项名称</th>
          <th>金额</th>
        </tr>
     </thead>
     <tbody class="sub-text" id="testBody">
       ${tableContent}
     </tbody>
    </table>
</body>
</html>`

如果你使用的PDF生成工具明确开启了JS执行权限（比如wkhtmltopdf配置了--enable-javascript参数），也需要先将数组序列化为合法JSON字符串再做插值，同时把脚本放到</body>标签前，保证DOM加载完成后再执行：

// 脚本部分修改示例
`
<script>
  function loadTableData(items) {
    const table = document.getElementById("testBody");
    items.forEach( item => {
      let row = table.insertRow();
      let name= row.insertCell(0);
      name.innerHTML = item.name;
      let amount= row.insertCell(1);
      amount.innerHTML = item.amount;
    });
  }
  // 序列化后再插值，保证插入的是合法JS对象格式
  loadTableData(${JSON.stringify(amountList)});
</script>
`

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