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;

但是这个就导致了一个问题，如果是<span>打印的内容</span>这样的，可以直接获取打印，但如果是赋值到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也一并给显示出来的了，效果不好，有会的可以指教一下啊。