多页面打印--web print

背景：项目中要求做在一个页面中通过选择网址来打印多个页面的内容的功能

原理：通过iframe把各网址的页面内容加载进来，通过iframe.contentWindow拿到iframe的window对象，把所有网址页面内容整合至一个里面，再通过样式page-break-after实现分页打印。iframe通过监听load事件确定页面加载结束，在load中再加载下一个页面，来确保加载的顺序进行。

输入：字符串或者数组

输出：弹出打印框，接着打印操作。

实现：使用构造函数保存实例自己的属性，通过原型保存方法。

属性：urls：传入的网址数组，len：页面加载剩余个数，printHTML：保存所有打印内容的字符串，mainIframe：最终用于打印的iframe对象

方法：createIframe：生成iframe对象，addIframe：把iframe加入当前页面，deleteIframe：删除iframe，getHTML：得到想要的html字符串内容，print：mainIframe打印操作，scan：递归加载iframe页面。

兼容：ie7-9,ff,chrome,opera,safari

代码：

;
(function (win, doc) {
    var REG = /\<\!--\s*print\s+start\s*--\>(.|\n)*\<\!--\s*print\s+end\s*--\>/ig;

    //add into window
    win.iframeprint = function (urls) {
        new IframePrint(urls);
    }
    //function
    function IframePrint(urls) {
        this.urls = typeof urls === "string" ? [].push(urls) : (urls instanceof Array ? urls : []);
        this.len = this.urls.length;
        if (this.len <= 0) {
            //this = null;  //赋值左侧无效
            alert("传入参数必须为string或者array。");
            return;
        }
        this.printHTML = '';
        this.mainIframe = this.createIframe(this.urls[0]);

        this.init();
    }
    //prototype
    IframePrint.prototype = {
        constructor : IframePrint,
        createIframe : function (url) {
            var iframe = doc.createElement("iframe"),
            style = iframe.style; ;
            style.zIndex = -100;
            style.width = 0;
            style.height = 0;
            style.border = "none";
            style.background = "none";
            iframe.src = url;
            return iframe;
        },
        addIframe : function (iframe) {
            doc.getElementsByTagName("body")[0].appendChild(iframe);
        },
        deleteIframe : function (iframe) {
            iframe.parentNode.removeChild(iframe);
        },
        getHTML : function (iframe) {
            var html = iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML;
            return html.match(REG).join("");
        },
        print : function () {
            var ifmWin = this.mainIframe.contentWindow;
            ifmWin.document.getElementsByTagName("body")[0].innerHTML = this.printHTML;

            //log
            console.log(new Date());
            console.log(this.printHTML);

            ifmWin.focus();
            ifmWin.print();
        },
        scan : function () {
            var iframe = this.createIframe(this.urls[this.urls.length - this.len]),
            _this = this,
            _callee = arguments.callee;
            iframe.onload = function () {
                var _html = _this.getHTML(this);
                if (_this.len <= 1) {
                    _this.printHTML += _html;
                    _this.print();
                    _this.deleteIframe(_this.mainIframe);
                } else {
                    _this.len--;
                    _this.printHTML += _html + '<p style="page-break-after:always; border:none; background:none;margin:0;padding:0;"></p>';
                    _callee.call(_this);
                    //log
                    console.log(">1");
                }
                this.onload = null;
                _this.deleteIframe(this);
            };
            this.addIframe(iframe);
        },
        init : function () {
            this.addIframe(this.mainIframe);
            this.scan();
            //不使用此方法
            /* while (this.len > 0) {
                this.scanBody();
                this.len--;
            } */
        }
    };
})(window, document);

缺点：这里加载的页面不能ajax动态数据，那样打印不出来相应的数据。

demo下载

 

 

转载于:https://www.cnblogs.com/qd4world/p/3214666.html