打印预览

现在做打印预览，刚开始只是觉得打印好写，直接调window.print()就OK了，或者再稍微复杂点用个jq的插件，但是真到写时，发现一个坑接着一个坑，（本人是菜鸟）。

也在查了很多资料，看了好多别人的博客，自己再做一下总结，也希望能帮助到别人，有需要改善的希望大家指教。

我做的是桌面应用程序，基于Chrome.我想要的效果是出现预览的界面。

一，window.print(),浏览器自带预览功能，但是到程序上，就变成直接调的打印设置的，没有预览功能。

二，网上说的WebBrowser——IE内置的浏览器控件，虽然可以实现打印、打印预览、打印设置等功能，但仅仅是在IE下可行，直接被踢出。不过也插一下它的使用代码。

<body>
<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object>
</body>
<script>
WebBrowser.ExecWB(1,1) //打开
WebBrowser.ExecWB(2,1) //关闭现在所有的IE窗口，并打开一个新窗口
WebBrowser.ExecWB(4,1) //保存网页
//--------------- 常用 ---------------
WebBrowser.ExecWB(6,1) //打印
WebBrowser.ExecWB(7,1) //打印预览
WebBrowser.ExecWB(8,1) //打印页面设置
//-------------------------------------
WebBrowser.ExecWB(10,1) //查看页面属性
WebBrowser.ExecWB(15,1) //撤销
WebBrowser.ExecWB(17,1) //全选
WebBrowser.ExecWB(22,1) //刷新
WebBrowser.ExecWB(45,1) //关闭窗体无提示
</script>

三，使用jq插件，也找了好几个来试，发现jquery.print-preview.js 可以实现我需要的预览功能，遗憾的就是还要改它的样式的代码，

下载地址：https://github.com/etimbo/jquery-print-preview-plugin

/*!

* jQuery Print Previw Plugin v1.0.1

*

* Copyright 2011, Tim Connell

* Licensed under the GPL Version 2 license

* http://www.gnu.org/licenses/gpl-2.0.html

*

* Date: Wed Jan 25 00:00:00 2012 -000

*/

(function($) {



// Initialization

$.fn.printPreview = function() {

this.each(function() {

$(this).bind('click', function(e) {

e.preventDefault();

if (!$('#print-modal').length) {

$.printPreview.loadPrintPreview();

}

});

});

return this;

};



// Private functions

var mask, size, print_modal, print_controls;

$.printPreview = {

loadPrintPreview: function() {

// Declare DOM objects

print_modal = $('<div id="print-modal"></div>');

print_controls = $('<div id="print-modal-controls">' +

'<a href="#" class="print" title="Print page">Print page</a>' +

'<a href="#" class="close" title="Close print preview">Close</a>').hide();

var print_frame = $('<iframe id="print-modal-content" scrolling="no" border="0" frameborder="0" name="print-frame" />');

// Raise print preview window from the dead, zooooooombies

print_modal

.hide()

.append(print_controls)

.append(print_frame)

.appendTo('body');

// The frame lives

for (var i=0; i < window.frames.length; i++) {

if (window.frames[i].name == "print-frame") {

var print_frame_ref = window.frames[i].document;

break;

}

}

print_frame_ref.open();

print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +

'<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' +

'<head><title>' + document.title + '</title></head>' +

'<body></body>' +

'</html>');

print_frame_ref.close();



// Grab contents and apply stylesheet

var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),

$iframe_body = $('body > *:not(#print-modal):not(script)').clone();

$iframe_head.each(function() {

$(this).attr('media', 'all');

});

if (!$.browser.msie && !($.browser.version < 7) ) {

$('head', print_frame_ref).append($iframe_head);

$('body', print_frame_ref).append($iframe_body);

}

else {

$('body > *:not(#print-modal):not(script)').clone().each(function() {

$('body', print_frame_ref).append(this.outerHTML);

});

$('head link[media*=print], head link[media=all]').each(function() {

$('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);

});

}



// Disable all links

$('a', print_frame_ref).bind('click.printPreview', function(e) {

e.preventDefault();

});



// Introduce print styles

$('head').append('<style type="text/css">' +

'@media print {' +

'/* -- Print Preview --*/' +

'#print-modal-mask,' +

'#print-modal {' +

'display: none !important;' +

'}' +

'}' +

'</style>'

);

// Load mask

$.printPreview.loadMask();

// Disable scrolling

$('body').css({overflowY: 'hidden', height: '100%'});

$('img', print_frame_ref).load(function() {

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

});



// Position modal

starting_position = $(window).height() + $(window).scrollTop();

var css = {

top: starting_position,

height: '100%',

overflowY: 'auto',

zIndex: 10000,

display: 'block'

}

print_modal

.css(css)

.animate({ top: $(window).scrollTop()}, 400, 'linear', function() {

print_controls.fadeIn('slow').focus();

});

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



// Bind closure

$('a', print_controls).bind('click', function(e) {

e.preventDefault();

if ($(this).hasClass('print')) { window.print(); }

else { $.printPreview.distroyPrintPreview(); }

});

},

distroyPrintPreview: function() {

print_controls.fadeOut(100);

print_modal.animate({ top: $(window).scrollTop() - $(window).height(), opacity: 1}, 400, 'linear', function(){

print_modal.remove();

$('body').css({overflowY: 'auto', height: 'auto'});

});

mask.fadeOut('slow', function() {

mask.remove();

});

$(document).unbind("keydown.printPreview.mask");

mask.unbind("click.printPreview.mask");

$(window).unbind("resize.printPreview.mask");

},

/* -- Mask Functions --*/

loadMask: function() {

size = $.printPreview.sizeUpMask();

mask = $('<div id="print-modal-mask" />').appendTo($('body'));

mask.css({

position: 'absolute',

top: 0,

left: 0,

width: size[0],

height: size[1],

display: 'none',

opacity: 0,

zIndex: 9999,

backgroundColor: '#000'

});

mask.css({display: 'block'}).fadeTo('400', 0.75);

$(window).bind("resize..printPreview.mask", function() {

$.printPreview.updateMaskSize();

});

mask.bind("click.printPreview.mask", function(e) {

$.printPreview.distroyPrintPreview();

});

$(document).bind("keydown.printPreview.mask", function(e) {

if (e.keyCode == 27) { $.printPreview.distroyPrintPreview(); }

});

},



sizeUpMask: function() {

if ($.browser.msie) {

// if there are no scrollbars then use window.height

var d = $(document).height(), w = $(window).height();

return [

window.innerWidth || // ie7+

document.documentElement.clientWidth ||// ie6

document.body.clientWidth, // ie6 quirks mode

d - w < 20 ? w : d

];

} else { return [$(document).width(), $(document).height()]; }

},



updateMaskSize: function() {

var size = $.printPreview.sizeUpMask();

mask.css({width: size[0], height: size[1]});

}

}

})(jQuery);

用的时候很简单，直接 $('#printView').printPreview(); 就行，（预览按钮）；但非常遗憾的是，样式真的很难调，也许是我太弱了，如果引用外部，网页原本的样式又改变了，所以没办法只能这样写了。

终于大功告成，预览页面可以了，但是又掉进了一个坑，真实的打印，打印的不是预览的打印页，而是原来网页的页面，所以又开始用jquery-printArea.js,但是又一个坑，就是iframe的问题，打印的总是空白页。

已解决，不需要用jquery-printArea.js，直接设置window的焦点在iframe页面，调系统的打印，但是还需设置打印页的样式，

打印预览

相关推荐