Printing a page on screen with window.print() or cordova-plugin-print

Tutorials
1

Hi everyone,

Just thought I would share something I made for one client I work for.

I made a framework7 internal app for them and the managers asked me if they had the ability to print a report page that had a lot of gauges, charts.

In the interest of trying to get it done as quickly as possible, I just did a normal javascript “window.print()” on desktop (or “window.cordova.plugins.printer.print();” on mobile/cordova with a plugin).

But… the print out was cropped to the view and didn’t display all the data that you can see if you scrolled down the page. So I knew I needed to change some CSS specifically for printing to not hide the overflow on the .page-content div.

Anyways, this is what I added to my main app.css file:

@media print {
    .page, .page-content, html, body, .framework7-root, .views, .view {
        height: auto !important;
    }

    html, body, .framework7-root, .views, .view {
        overflow: visible !important;
        overflow-x: visible !important;
    }

    .page.page-previous {
        display: none;
    }
}

This does not affect normal viewing, only printing because of the “@media print {}” declaration. Now any page I add a “print” button to will see all the scrollable content hidden below the view.

Eventually I will write some PDF code for these guys and generate it that way but this was simple enough to just allow them to print from their phones or computers what they see on the screen.

  • Matt
8 Likes
2

Thanks for sharing! :+1:

3

Sounds cool!!! @spiffyguy
Do you know how to convert json to sheet???

4

Thank you so much for this, I was getting close to what you had through trial and error, but you had the missing pieces, saving me who knows how much more time!