Google Web app HTML page break not working

1
votes

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

3
web-applicationsgoogle-apps-scriptpage-break

3 Answers

4
votes

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

First of all the credit must go to Kos for pointing out that if I highlight text in the iframe it then prints correctly - I would never have thought to try that

so now I've added a small function that prints just the iframe instead of the page itself.

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

and I've added a button to the dashboard for that function. I'll just make sure the users don't use the normal print menu.

0
votes

Please use @media print { div.break{} } Try this.