Google Web 应用程序 HTML 分页符不起作用答案

【问题标题】：Google Web app HTML page break not workingGoogle Web 应用程序 HTML 分页符不起作用
【发布时间】：2017-07-21 10:18:15
【问题描述】：

我有一个 Google Apps 脚本“网络应用程序”。我正在尝试为其生成的 2 页仪表板创建分页符。

我已经用here 发布的基本网络应用程序重现了这个问题，这里是整个代码。

<body>
<div>page1</div> 
<div class="break"></div>
<div>page2</div>
</body>

<style>
.break{
display:block; 
page-break-before:always; 
}
</style>

是不是因为 web 应用显示在一个 iframe 中，所以不能中断？

如果是这样 - 可以拆分成多个 iframe 吗？？

或者是我缺少的一些简单的东西。

编辑：我现在也试过了

div.break{
 display:block; 
 page-break-before:always; 
}

和

@media print { 
 div.break{
 display:block; 
 page-break-before:always; 
 }
}

这并没有改变任何东西。我在 Chrome 和 IE 中尝试过，都忽略了分页符。

编辑 2：

我认为这一定是 iframe 问题，因为如果我将代码复制到纯文本文件中并在 Chrome 中打开它，它会打印在 2 页上。因此，在 Apps 脚本中使用它必须忽略中断，大概是因为整个事情都在一个 iframe 中。嗯……

谢谢

【问题讨论】：

标签： web-applications google-apps-script page-break

【解决方案1】：

您是对的，您的 html 由 Google Apps 脚本在iframe 中显示。当您尝试打印 web 应用页面时，此iframe 无法在多个页面中打印。

解决方案：在您的网络应用程序中选择一些文本，例如page1，以获取iframe 的上下文，然后点击打印...，它将打印只是 iframe 您选择了以下文字：

编辑：

您可以将“打印...”按钮添加到您的网页应用页面，使其更加用户友好：

<div>page1</div> 
<div class="break"></div>
<div>page2</div>

<!-- added print button (with class "hide-on-print" to not display it when printed) -->
<button id="print" class="hide-on-print">Print...</button>

<script>
// open print dialog on button click
document.getElementById('print').addEventListener('click', function(){
  window.print();
});
</script>

<style>
@media print {
    .hide-on-print {
        display: none
    }
    .break{
      display:block; 
      page-break-before:always; 
    }
}
</style>

【讨论】：

天哪，这太奇怪了！为什么这会起作用。它也适用于我的实时仪表板。有点奇怪，我必须告诉我的用户在打印之前突出显示标题，但如果这是唯一的选择......
@MrPea 您可以在您的网页应用页面中添加打印按钮，请检查答案编辑。
啊，伟大的思想都一样。我做的完全一样。我会将您的答案标记为正确，而不是我的答案，因为如果没有您的洞察力，我将无法解决这个问题。

【解决方案2】：

首先要感谢 Kos 指出，如果我在 iframe 中突出显示文本，它就会正确打印 - 我从来没有想过要尝试这样做

所以现在我添加了一个只打印 iframe 而不是页面本身的小函数。

function printall() {
 window.print();
 window.frames[0].print();
}

我已经为该功能在仪表板中添加了一个按钮。我会确保用户不使用正常的打印菜单。

【讨论】：

【解决方案3】：

请使用@media print { div.break{} } 试试这个。

【讨论】：

再次感谢。仍然没有喜悦。我已经编辑了这个问题，因此您可以看到整个代码和一个测试发布的应用程序的链接，看看它没有工作。
我认为这是对 Apps Script Web 应用程序及其对 iframe 的使用的限制。当我将代码放入纯文本文件时，它工作正常。