WEB前端静态网页打印预览简单实用的方法

本文介绍了WEB前端静态网页打印预览简单实用的方法，这个方法是小编见过的最简单的，只要确认要打印内容的头和尾，就可以实现在线预览功能，非常的实用，一起来看看怎么实现的吧。

下面来说说WEB前端静态网页打印预览简单实用的方法。

方法太简单，所以直接上代码吧。

DIV代码：

<!--startprint-->
<div class="big-x4 float-left">
    <div class="margin-mini bg-white margin">
        <div class="grid padding-big box-shadow">
            <div class="x10 size-big ">
                <p id="edit1" contenteditable="false">患者：张三 &nbsp;&nbsp;&nbsp; 性别：男
                    &nbsp;&nbsp;&nbsp; 年龄：22岁</p>
            </div>
            <div class="x2 align-right"> <a href=""><img src="statics/images/bianji.png" id="btn1"
                    alt=""></a> </div>
        </div>
    </div>
</div>
<!--endprint-->

打印按钮：

<button class="button size-big bg-main" onclick="preview()">打印处方</button>

JS代码：

<!-- 打印处方 -->
<script>
function preview() {
    $("body").css('background-color', '#fff');
    bdhtml = window.document.body.innerHTML;
    sprnstr = "<!--startprint-->";
    eprnstr = "<!--endprint-->";
    prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18);
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML = prnhtml;
    window.print();
    window.document.body.innerHTML = bdhtml;
};
</script>