Search code examples
web-applicationsgoogle-apps-scriptpage-break

Google Web app HTML page break not working

I've got a Google Apps Script "Web App". I am trying to create a page break for the 2 page dashboard it produces.

I've reproduced the problem with a basic web app published here and here is the entire code.

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

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

Is it because the web app is displayed in a single Iframe and so no break is possible?

If so - can it be split into multiple Iframes??

or is it something simple I'm missing.

EDIT: I've also now tried

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

And

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

and that didn't change anything. I've tried it in Chrome & IE and both ignore the page break.

EDIT 2:

I think it must be an iframe issue because if I copy my code into a plain text file and open it in Chrome it prints on 2 pages. So using it in Apps script must ignore the break presumably because the whole thing is inside a single iframe. hmmmm....

thanks

Solution

  • You are right, your html is displayed by Google Apps Script in iframe. When you try printing web app page, this iframe cannot be printed in several pages.

    Solution: select some text inside your web app, for example page1, to get in context of iframe, then hit Print..., it will print just that iframe you selected text in:

    enter image description here

    Edit:

    You can add 'Print...' button right to your web app page to make it more user-friendly:

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