当将html转换为pdf时，防止表单元格跨越页面。

Question

使用谷歌应用程序脚本，我有一个html模板，我填写，然后发送(通过传真和/或电子邮件)作为一个pdf。该模板包括一个包含问题/答案的两列表。

如果有足够多的行，表就会在pdf中的各个页面之间分叉，而分页符通常发生在单元格的中间；我想避免这种情况。

我在<tr>和<td>元素中都尝试过使用<td>，但没有任何效果。

下面是模板：

<table style="border-collapse: collapse; border: 1px solid black; table-layout: fixed; width: 100%;">
  <tbody>
    <tr>
      <th style="border: 1px solid black; width: 30%; padding: 5px;">Question</th>
      <th style="border: 1px solid black; width: 70%; padding: 5px;">Response</th>
    </tr>
  <? rows.forEach(function(row){ ?>
    <tr style="break-inside: avoid;">
      <td style="break-inside: avoid; border: 1px solid black; padding: 5px; line-height: 1.5rem;"> <?= row.question ?> </td>
      <td style="break-inside: avoid; border: 1px solid black; padding: 5px; line-height: 1.5rem;"> <?!= row.answer ?> </td>
    </tr>
  <? }) ?>
  </tbody>
</table>

下面是将其转换为pdf的Apps脚本代码：

var html = '<h3>' + subject + '</h3>'
var tableTemplate = HtmlService.createTemplateFromFile('response-table-template')
tableTemplate.rows = rows;
html += tableTemplate.evaluate().getContent();

var blob = Utilities.newBlob(html, MimeType.HTML, subject).getAs(MimeType.PDF); 

然后将blob附加到电子邮件/传真上。所有这些都很好，除了我的问题:是否有一种方法可以避免在页面上打破表行？可能是另一种将html转换为尊重break-inside属性的pdf的方法吗？还是一个html/css解决方案，在将html blob转换为pdf时会受到Apps脚本的尊重？

Answer 1

通过实验，我发现Utilities.newBlob(html, MimeType.HTML, subject).getAs(MimeType.PDF)将尊重page-break-inside: avoid; (而不是break-inside: avoid;)，但前提是它应用于整个表。所以我不得不把每一行当作一个单独的桌子。这个版本的html模板解决了这个问题：

<table style="border-collapse: collapse; border: 1px solid black; table-layout: fixed; width: 100%;">
  <tbody>
    <tr>
      <th style="border: 1px solid black; width: 30%; padding: 5px;">Question</th>
      <th style="border: 1px solid black; width: 70%; padding: 5px;">Response</th>
    </tr>
  </tbody>
</table>
<? rows.forEach(function(row){ ?>
  <table style="page-break-inside: avoid; border-collapse: collapse; border: 1px solid black; table-layout: fixed; width: 100%;">
    <tbody>
      <tr>
        <td style="width: 30%; border: 1px solid black; padding: 5px; line-height: 1.5rem;"> <?= row.question ?> </td>
        <td style="width: 70%; avoid; border: 1px solid black; padding: 5px; line-height: 1.5rem;"> <?!= row.answer ?> </td>
      </tr>
    </tbody>  
  </table>
<? }) ?>

作为记录，转换为Google，然后转换为pdf并不能解决这个问题；看来Google还允许跨页的表格单元格。不过，将数据写入Google工作表，然后以pdf格式下载，确实可以防止跨页单元格的断裂；工作表似乎会自动处理这一问题，因此这是另一种解决方案。

Answer 2

不幸的是，在当前阶段，break-inside似乎没有反映到Utilities.newBlob(html, MimeType.HTML, subject).getAs(MimeType.PDF)中。但我不确定这是否是目前的规范。因此，作为一种解决办法，在您的例子中，下面的流程如何？

1. 准备HTML数据。
   • 这已经在你的脚本中准备好了。

2. 将HTML数据转换为Google文档。
   • 在本例中，使用了Drive。

3. 将Google文档转换为PDF数据。
4. 创建blob作为文件。

当您的脚本被修改时，如下所示。

修改脚本：

在使用此脚本之前，请在高级谷歌服务上启用驱动器API。

发自：

var blob = Utilities.newBlob(html, MimeType.HTML, subject).getAs(MimeType.PDF); 

至：

// 1. Prepare HTML data.
var blob = Utilities.newBlob(html, MimeType.HTML, subject);

// 2. Convert HTML data to Google Doc
var id = Drive.Files.insert({title: subject, mimeType: MimeType.GOOGLE_DOCS}, blob).id;

// 3. Convert Google Document to PDF data.
var url = "https://docs.google.com/feeds/download/documents/export/Export?exportFormat=pdf&id=" + id;
var pdf = UrlFetchApp.fetch(url, {headers: {authorization: "Bearer " + ScriptApp.getOAuthToken()}}).getBlob().setName(subject);
DriveApp.getFileById(id).setTrashed(true);

// 4. Create blob as a file.
DriveApp.createFile(pdf);

参考资料：

• 档案:插入