Printable Version of Google Visualizations DataTable

Question

I have a custom routing application that takes information for a route from google maps. It then creates a Google Visualizations DataTable to hold all the steps in the route.

My current problem is that in order to reduce overflow for very large routes, I have enabled paging in the options of the DataTable. This leads to a not so printer friendly version because only the portion of the data that is shown in the table will be printed. The other portions of the table are loaded dynamically by the API when you click prev and next.

Is there a not so hard way to get the DataTable to be printer friendly when it comes time without sacrificing the ability to have paging enabled?

Answer 1

There's a few ways you could do it.

If the changes you need in order to make the page "printer friendly" can be done purely by changing the CSS styling, then all you need to do is add another style sheet for print media:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

That is a pretty easy and transparent way to do it: the print media style sheet that will be used for printing, while your original style sheet will be used for web viewing.

So you could change the way things are displayed, or even toggle visibility whether it's being viewed on the web or printed...that should get you where you need to be.

To be honest I'm not too familiar with what you're doing, but it sounds like the user has to make a new request for each page...in that case just CSS styling will not help you.

You'll have to either make the information available all on one page ( just parts invisible), or set up a function in the app, or an option, et cetera that spits out a printer-friendly version.

Answer 2

This is the way that I ended up solving this problem. I will not accept my own answer just in case someone has something much more elegant.

Originally I had:

var visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "enable",
    pageSize: 9
});

I added another one that went to a div that I would hide with css.

//Create a second Visualization that Will be hidden.
   var visualization = new google.visualization.Table(document.getElementById('printerFriendly'));
visualization.draw(data, {
    sort: "disable",
    allowHtml: true,
    showRowNumber: true,
    page: "disable"
});

Then I added the following rules to one of my css files.

 @media print  
    {
        #table{ display:none; }
    }
 @media screen
    {
         #printerFriendly{ display:none;}
    }

This hides one table during normal use and hides the other during printing. I was hoping for something a little cleaner than this but this solution was very easy to implement.