CODEWITHSUNDEEP
google-apps-script
Chris
Chris

Reputation: 129

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

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:

enter image description here

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

Upvotes: 2

Views: 395

Answers (2)

Saad A
Saad A

Reputation: 1147

<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

Upvotes: 0

PCoughlin
PCoughlin

Reputation: 153

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.

Upvotes: 2

Related Questions