window.print 打印页面指定区域

这一阵子由于项目需要，需要在项目某页面下加一个打印的功能，在网上查过之后，知道了window.print 这个函数，这个函数可以很方便的打印当前窗口中的内容， 但是这个有时候并不能满足广大用户的需求；经过半天时间在网上浏览查阅后，发现一个很不错的解决方案，能够打印页面中指定的区域，现将代码贴下：

function printThis() {
var el = document.getElementById("sinopec_add_form");
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
// 引入打印的专有CSS样式，根据实际修改
// doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
// 获取iframe的焦点，从iframe开始打印
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
    document.body.removeChild(iframe);
}
}

到此，已经能够成功打印我想要指定的区域了！哈哈。。

但测试过后，虽然可以成功打印了，但是老大的需求需要将文本框以及下拉框中的内容一并打印出来，后来发现，只要将文本框中的 value 属性赋上值，它就会将内容带到  iframe中。所以又增加如下方法：

$(function(){

$.each($(":text"),function(i, n) {
$(n).change(function() {
$(this).attr("value", $(this).val())
})
})
$.each($("select"),function(i, n) {
$(n).change(function() {
var selected = $(this).val();
$(this).children().each(function(j,m) {
if ($(m).val() == selected) {
$(m).attr("selected", true);
}
})
})
})

});

这个方法是当文本框或者下拉框中的值出现变化时就会触发，并将变化的值赋给相应控件的 value 属性。

到此，需求满足！！ 特此记录。。