Google Apps Script - Formatting printed page in doGet() web app

Question

I created a doGet() web app that uses the HtmlService to return an HtmlOutput object. The page has a lot of content, so I just mocked up this web app that has three long paragraphs with fake text:

function doGet(e) {
  var output = HtmlService.createHtmlOutput('<!DOCTYPE html><html><head>' +
    '<style>' +
    '@media print { .mydiv { background-color: white; height: 100%; width: 100%; position: fixed; top: 0; left: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 18px; }};' +
    '</style>' +
    '</head><body>' + 
    '<div id="mydiv"><p>Lorem ipsum dolor...luctus.</p>' +
    '<p>Lorem ipsum dolor...luctus.</p>' +
    '<p>Lorem ipsum dolor...luctus.</p></div>' +
    '</body></html>');
  return output;
}

As you can see from the link, the html returns as expected. The problem is that when I try to print the page from the browser, only the first page prints. I've tried using javascript and the @media print style (in the above example that I got from an answer on this SO question), and have tried printing in various browsers...but only the first page prints and the scroll bar is on the printed page! Here is a print preview:

Any thoughts about how I can get the text to print on multiple pages like it should? Not sure if it's a Google Apps Script thing or if I just don't know enough CSS...

Set the HTMLsandbox to IFRAME and see how that goes, https://developers.google.com/apps-script/guides/html/restrictions. — Kriggs, Aug 28 '15 at 20:09
https://stackoverflow.com/questions/9399354/how-to-open-a-new-window-and-insert-html-into-it-using-jquery use this link. Idea is create a button that open a new tab, insert the printed html (your data) into it, and then you can print it since it is not inside any IFrame — Saad A, Nov 01 '17 at 13:49

PCoughlin · Answer 1 · 2017-03-30T19:08:57.627

2

This is not a problem with the layout. It is being caused by your content being injected into an <iframe> instead of being a plain HTML document.

Go to the generated page and right click and pick "View Page Source". You will see the page is made up of a <script> section with your actual text and a <body> with just an <iframe> that gets filled.

Printing the page renders the <iframe> at 100% of the page size, then adds the slider on the right because there is more content in the <iframe> than will fit on the page.

Please describe the whole process you are trying to achieve to get a better answer.

edited Mar 30 '17 at 19:08

answered Aug 30 '15 at 12:34

PCoughlin

153
10

so what is the answer, is it possible to print or not? I have form which I want to display in an HTML table so the user can print it. I am using https://developers.google.com/apps-script/guides/html/ this link to generate my page which works fine, but how do I print the content of the IFrame ? – Saad A Nov 01 '17 at 13:18

score 0 · Answer 2 · answered Nov 01 '17 at 13:50

<button class="transfer-data">Transfer Printed Data</button>
<table class="my-data" style="width:100%">
  <tr>
    <th>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</th>
    <th>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</th> 
    <th>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</th>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td> 
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td> 
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td> 
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td> 
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td> 
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus leo sagittis, euismod diam nec, ultrices lectus. Nunc aliquam nec augue sed placerat. Pellentesque urna velit, sodales eget enim eu, ultrices maximus urna. Etiam gravida auctor tellus, ut mattis eros fringilla eu. Etiam justo arcu, sollicitudin ac volutpat a, efficitur commodo nulla. Nulla euismod sagittis nibh, cursus consequat metus tincidunt vestibulum. Sed congue lectus id dui consequat ornare. Suspendisse tincidunt mattis velit sed tempor. Nulla eleifend a elit non rutrum. Fusce at elit et odio porttitor dictum. Quisque cursus odio ac eros sollicitudin, condimentum convallis ante blandit. Aliquam in tortor eu ligula congue elementum quis non augue. In vehicula felis ex, vitae congue metus placerat non. Phasellus ac urna sed ex egestas hendrerit at a dolor. Vestibulum odio tellus, pulvinar sit amet felis id, cursus iaculis nisl. Aliquam rutrum interdum eros ac volutpat.</td>
  </tr>

</table>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>
    $(function() 
    {
        $(".transfer-data").on( "click", function()
        {
            var printedData = $(".my-data").html();
            var w = window.open();
            $(w.document.body).html(printedData);
        });
    });
</script>

Above is my html to print

function doGet()
{
    return HtmlService.createHtmlOutputFromFile('print.html').setHeight(1000);
}

Idea is create a button that open a new tab, insert the printed html (your data) into it, and then you can print it since it is not inside any IFrame

Google Apps Script - Formatting printed page in doGet() web app

2 Answers2