14

想要达到打印整个网站中的部分内容且完成打印后原网页保持不变的效果,搜到以下资料:
window.print打印指定网页区域的方法
JavaScript页面打印(只打印指定部分)
JS打印指定页面且去样式后的内容,window.print
都能达到打印整个网站中的部分内容,但是,打印后,网页就剩下了打印的内容,其他内容全部被隐藏了,这不是我想要的,最终找到Javascript Print iframe contents only这个链接里的被采纳回答的例子,结合自己的需要,达到了想要的效果。

以上资料里各种方法的利弊都说得很清楚了,我就不废话了,直接看demo吧。

demo

html代码:

<table align="center" class="ml70">
        <tbody>
            <tr>
                <td colspan="8">
                    <div align="center">
                        <b><span >不打印的内容部分//////////////////////</span></b></div>
                    <div>
            </tr>
        </tbody>
    </table>
    <a href="#" onclick="javascript:history.back(1); event.returnValue=false">
        << 返回</a><br />
            <!--startprint-->
            <br />
            <table align="center" class="ml70">
                <tbody>
                    <tr>
                        <td colspan="8">
                            <div align="center">
                                <b><span >//////////////////////要打印的内容部分//////////////////////</span></b></div>
                            <div>
                    </tr>
                </tbody>
            </table>
            <!--endprint-->
            <input type="button" value="打印" onClick="printPage()" />

            <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>

js代码:

 <script type="text/javascript">  
        function printPage() {  
            //获取当前页的html代码  
            var bodyhtml = window.document.body.innerHTML;  
            //设置打印开始区域、结束区域  
            var startFlag = "<!--startprint-->";  
            var endFlag = "<!--endprint-->";  
            // 要打印的部分  
            var printhtml = bodyhtml.substring(bodyhtml.indexOf(startFlag),   
                    bodyhtml.indexOf(endFlag));  
            // 生成并打印ifrme  
            var f = document.getElementById('printf'); 
            f.contentDocument.write(printhtml);
            f.contentDocument.close();
            f.contentWindow.print();
        }  
    </script>

效果截图

图片描述

图片描述

打印取消后,页面还是第一张图那样子的。


北堂棣
6.6k 声望116 粉丝

2016年应届毕业生。