class jqprint 失效_JavaScript 实现局部打印（动态获取的内容）

第一次写打印，只知道window.print()，可是直接出来的是当前页面的所有内容，而我要做的是打印当前模态框里展示的内容。

网上搜了一下，都是指定具体的div，然后获取该div里的内容赋值给window.document.body.innerHTML

var bodyHtml = window.document.body.innerHTML;

window.document.body.innerHTML = html;//html为当前显示的div的内容

window.print();

window.document.body.innerHTML = bodyHtml;

但是这个就导致了一个问题，如果是打印的内容这样的，可以直接获取打印，但如果是赋值到input标签里的，根本就获取不到值啊。

怎么办，接着搜呗。

找到两种方法，第一种，也是比较原始的：将表单中的数据进行绑定，获取过来重新赋值给对应的input中;

//打印模态框问卷内容

$('.myform').on('click', 'a[name="printInfo"]', function () {

$('#listModal').modal('hide');//关闭模态框

$('#quesInfoModal').modal('hide');

var weI = this.id;

onprint(weI);

});

});

//打印指定区域

function printHtml(html) {

var bodyHtml = window.document.body.innerHTML;

window.document.body.innerHTML = html;

window.print();

window.document.body.innerHTML = bodyHtml;

//上面关于bodyHtml赋值的两项操作可以忽略，因为要关闭模态框并且刷新页面

//这个地方必须要刷新一下页面，打印重新赋值之后，模态框里的功能都不能正常使用，

包括父页面列表中的功能也失效，这个问题不是很明白，有知道的可以帮忙解决一下

refreshFrame();//刷新页面

}

function onprint(weI) {

if (weI == 'wenjuanI') {//调查问卷详情

bindData('#quesInfoModal');

var html = $('#quesInfoModal').html();

} else {

bindData('#listModal');

var html = $('#listModal').html();

}

printHtml(html);

}

//将表单中手动填写的数据进行绑定，便于html()的时候获取到

function bindData(modalID) {

//type=text,type=number, 同时如果checkbox,radio,select>option的值有变化, 也绑定一下

$(modalID + " input[type='text']").each(function () {

$(this).attr('value', $(this).val());

});

$(modalID + " input[type='number']").each(function () {

$(this).attr('value', $(this).val());

});

$(modalID + " input,select option").each(function(){

$(this).attr('value',$(this).val());

});

//type=checkbox,type=radio 选中状态

$(modalID + " input[type='radio']").each(function () {

if ($(this).attr('placeholder')) {//$(this).attr('checked')

$(this).attr('checked', true);

} else {

$(this).removeAttr('checked');

}

});

$(modalID + " input[type='checkbox']").each(function () {

if ($(this).attr('placeholder')) {//$(this).attr('checked')

$(this).attr('checked', true);

} else {

$(this).removeAttr('checked');

}

});

//$('.modal-backdrop').each(function () {//关闭模态框的遮罩层

// $(this).removeClass('in');

//});

}

注意：这种方法，必须要刷新一下页面，打印重新赋值之后，模态框里的功能都不能正常使用，包括父页面列表中的功能也失效，(相当于页面变成了一个纯静态页面，没有js了)这个问题不是很明白，有知道的可以帮忙解决一下啦

第二种方法，我看网上有说用jqprint插件的(http://www.jq22.com/jquery-in...)，这个我也没有详细的看，只是稍微试了一下，也是不能获取到input的值，而且隐藏的div也一并给显示出来的了，效果不好，有会的可以指教一下啊。