jQuery打印预览未显示整页

Question

I'm using this tool to make a print preview of my page.

Demo Plugin

I have a table in my page. So when I draw preview after pageload, it' not showing full page in Firefox .

But in chrome same page is working perfectly, showing a full preview.

Codes.

<link rel="stylesheet" href="{{ asset('bundles/joy/css/print.css') }}" type="text/css" />

<link rel="stylesheet" href="{{ asset('bundles/joy/print/css/print-preview.css') }}" type="text/css" />

<link rel="stylesheet" href="{{ asset('bundles/joy/css/print.css') }}" type="text/css" media="print"/>

This print.css is made by me.It's not from the plugin example.

$('body').printPreview();
$.printPreview.loadPrintPreview();

Am I missing something? How can I see the full preview in both firefox and chrome??

Answer 1

Problem was in iFrame height . If I adjust the iFrame height based on my total Page Height, it works correctly.

The Demo example also contain the problem in Firefox as of 10-02-14(Downloaded demo code). The footer or the copyright notice cuts into half in the print preview example.

So here is what I did. In the jquery.print-preview,js file, I replaced all instances of

print_frame.height($('body', print_frame.contents())[0].scrollHeight);

with

heights=Math.max($(document).height(), $(window).height())+30;
print_frame.height(parseInt(heights));

This will set the iframe height with actual document height.