Google 网络应用程序 HTML 分页符不起作用

Question

我有一个 Google Apps 脚本 "Web App"。我正在尝试为其生成的 2 页仪表板创建分页符。

我已经使用已发布的基本 Web 应用程序重现了该问题 here，这里是完整代码。

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

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

是不是因为网页应用显示在一个单独的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 中。嗯嗯....

谢谢

Answer 1

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

Answer 2

您说得对，您的 html 由 Google Apps 脚本显示在 iframe 中。当您尝试打印 Web 应用程序页面时，此 iframe 无法分页打印。

解决方案：select 网络应用程序中的一些文本，例如 page1，以获取 iframe 的上下文，然后点击 打印...，它将只打印 iframe 您 select 在以下位置输入的文本：

编辑：

您可以将 'Print...' 按钮添加到您的网络应用程序页面右侧，以使其更加用户友好：

<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>

Answer 3

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

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

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

并且我已经为该功能在仪表板上添加了一个按钮。我只会确保用户不会使用普通的打印菜单。

Google 网络应用程序 HTML 分页符不起作用

Google Web app HTML page break not working

web-applications

page-break

google-apps-script