CODEWITHSUNDEEP
jquerycssprinting
Jonas
Jonas

Reputation: 323

Printing a DIV container without losing CSS styles

After reading multiple articles, forums and so on, it gets to the point where I come & seek your help.

I am trying to add a Print button in a page, that would, upon clicking, print a table. I have tried jqprint (so far the best solution) but it's still not right:

The layout of the page is a tab that contains an accordion. Inside that accordion is a table with multiple rows. There are hidden divs inside each rows.

When the user clicks the Print button, the hidden divs are shown, and then, jqprint is called to print the table, using the ID as the selector.

In FireFox: When I print into a PDF (to save paper and be nice with Mother Nature), only the first few rows of the table are printed. Basically, the PDF would contain many pages, but I only get the first one and nothing else after that.

In Chrome: Doesn't work at all. The PDF is blank.

If you know of a fix for jqprint or have any feedback on that problem, thanks in advance.

Jonathan

Upvotes: 3

Views: 6432

Answers (3)

Akshay Joshi
Akshay Joshi

Reputation: 485

Try using printThis plugin.

pass the id of element to print.

i am using this plugin to print a variable rowspan and colspan it work nicely preserving the struct of table.

$('#table_id').printThis({ pageTitle: $('#report_title').text()});

hope this helps you

Upvotes: 0

Graham
Graham

Reputation: 15214

Styling html for printing is commonly achieved using a different style sheet, e.g. in your head element:

<head>
    ...

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

</head>

The style sheet style.css is used to style your html on screen, while print.css is used to style your html for print. By providing the appropriate styling in print.css you can easily show or hide html elements to achieve the output you are looking for.

Upvotes: 3

Gajendra Bang
Gajendra Bang

Reputation: 3583

You can use another css for print i.e. print.css and make all the divs visible that you want to print.

Upvotes: 0

Related Questions