javascript - Jquery 打印预览不显示整页

Question

我正在使用此工具对我的页面进行打印预览。

Demo Plugin

我的页面中有一个表格。因此，当我在页面加载后绘制预览时，它不会在 Firefox 中显示完整页面。

但在 chrome 中，同一页面运行良好，显示完整预览。

代码。

<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"/>

这个print.css是我自己做的，不是插件的例子。

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

我错过了什么吗？如何在 Firefox 和 Chrome 中查看完整预览？

Answer 1

问题出在iFrame 高度。如果我根据总页面高度调整 iFrame 高度，它会正常工作。

演示示例还包含截至 10 月 2 日 14 日 Firefox 中的问题(下载的演示代码)。在打印预览示例中，页脚或版权声明被减半。

这就是我所做的。在 jquery.print-preview,js 文件中，我替换了所有实例

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

与

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

这会将 iframe 高度设置为实际文档高度。