js调起打印纸,打印指定内容

<!--startprint-->
 <h1>你想打印的内容写在这里</h1>
<!--endprint-->

首先用这两个注释标签,将需要打印的部分包起来,类似于下

<!--startprint-->
<div class="right-item">
    <div class="right-title">
        <p class="P-blod">{$user_info.user_nickname}报价单</p>
    </div>
    <!--表格-->
    <div class="tab">
        <table>
            <tr id="print_order_list">
                <th>序号</th>
                <th>型号</th>
                <th>材质 <!--<input type="radio" name="d-item">--></th>
                <th>主体厚度(mm) <!--<input type="radio" name="d-item">--></th>
                <th>盖板厚度(mm) <!--<input type="radio" name="d-item">--></th>
                <th>价格(元/米)</th>
                <th>含税价格 (元/米) <!--<input type="radio" name="d-item">--></th>
                <th class="no_print">删除</th>
            </tr>
        </table>
    </div>

    <!--底部按钮-->
    <div class="button-item">
        <a href="javascript:;" class="while no_print" id="do_print">开始打印</a>
    </div>
</div>
<!--endprint-->

然后写一个 function doPrint();

<script>
function doPrint() {
    bdhtml=window.document.body.innerHTML;
    sprnstr="<!--startprint-->";
    eprnstr="<!--endprint-->";
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML=prnhtml;
    window.print();
}
</script>

在需要打印的地方调起 doPrint()方法
如上代码中的 开始打印按钮 当用户点击时,如下代码

/*
 * 打印开始
 * */
 $("#do_print").on("click",function () {
     var no_print = $(".no_print");
     no_print.hide();
     doPrint();
     no_print.show();

 })

代码中

no.print.hide(); //是我将打印区域不想出现在打印页面的DOM元素在打印之前隐藏掉
doPrint();       //这时候执行打印
no_print.show(); //是打印成功后,将之前隐藏的Dom元素显示出来

这样就实现了
下图是原始网页,用户想实现打印右半部分的报价单,并且不想出现表单中的 删除,删除图标,以及开始打印部分元素
所以就使用hide()在打印之前,将其隐藏,打印调起后,再显示出来

这样调起打印的效果如下图

如有帮助,望评论;也可添加 wx (qubojie) 一起讨论;