码迷,mamicode.com
首页 > 其他好文 > 详细

打印功能会出现的问题

时间:2018-10-22 20:43:20      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:val   star   tle   title   ...   put   review   http   js调用   

需求如图:

技术分享图片

弹窗里有“打印”功能。

最开始网上找了个方案:

http://www.cnblogs.com/huichao1314/p/5545992.html   参考下博客。

主要代码:

js

var oper = 1; //初始值
    function preview(oper) {
        if (oper < 10) {
            bdhtml = window.document.body.innerHTML;//获取当前页的html代码
            sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域

            /*     alert(sprnstr) */
            eprnstr = "<!--endprint" + oper + "-->";//设置打印结束区域
            prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
            window.document.body.innerHTML = prnhtml;
            window.print();
            window.document.body.innerHTML = bdhtml;
            /* window.location.reload(); */
            //刷新页面
        } else {
            window.print();

        }
    }

html

然后在所需要打印的代码,用<!--startprint1--><!--endprint1-->包围着,如下:

---------------------------------------------

<!--startprint1-->

<!--打印内容开始-->
<div id=sty>
    ...

</div>
<!--打印内容结束-->
<!--endprint1-->

---------------------------------------------

最后加上一个打印的按钮

<input type=button name=‘button_export‘ title=‘打印1‘ onclick=preview(1) value=打印1>

这种是可以实现打印的,但是会出现个问题:

技术分享图片

用widow自带的打印,点“取消”,会导致最开始的弹窗界面的“取消”,失效。即图1 的不能关闭。

为了解决这个问题 ,换方案:

js调用iframe实现打印页面内容的方法

这种方案是

1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;
2) 与原生态的print()    (方法1)区别在于,取消打印页面后可以完整保留当前访问页面的内容。(解决了问题)

html代码:

// 打印区域:
<div id="sty">
......
</div>
// 调用打印
<button onclick="print(‘sty‘);">打印</button>

js

    function print(id_str){
        var el = document.getElementById(id_str);
        var iframe = document.createElement(‘IFRAME‘);
        var doc = null;
         document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;
          doc.write(‘<div>‘ + el.innerHTML + ‘</div>‘);
        doc.close();
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf("MSIE") > 0)
        {
             document.body.removeChild(iframe);
        }
    }

测试下发现,进入打印页面取消后,也不会影响最开始的弹窗啦

参考下  https://www.jb51.net/article/47622.htm

 

打印功能会出现的问题

标签:val   star   tle   title   ...   put   review   http   js调用   

原文地址:https://www.cnblogs.com/yizhizhangBlog/p/9831436.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!