15621857753

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

来源:齐鲁建站 栏目:Html5 阅读: 日期:2022-12-21

本文介绍了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>

展开