xy-tool-ui/package/y-iframe-report/src/print.js

XiaoYi tool compenent library

export function onKeydownPrint(e, appendHtml) {
    var keyCode = e.keyCode || e.which || e.charCode;
    var ctrlKey = e.ctrlKey;
    console.log('监听');
    if (ctrlKey && keyCode == 80) {
        e.preventDefault();
        let iframe_html = document.getElementById('iframe').srcdoc;
        let html = iframe_html.replace(/(?=<\/body>)/gm, appendHtml);
        // const container=getContainer(html);
        // window.document.body.appendChild(getStyle())
        // window.document.body.appendChild(container);
        // setTimeout(window.print(),1000)
        // printHtml(html)
        writeIframe(html);
    }
}

export function writeIframe(content) {
    var w,
        doc,
        iframe = document.createElement('iframe'),
        f = document.body.appendChild(iframe);
    iframe.id = 'myIframe';
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute(
        'style',
        'position:absolute;width:0;height:0;top:-10px;left:-10px;'
    );
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
    var _this = this;
    iframe.onload = function () {
        toPrint(w);
        setTimeout(function () {
            document.body.removeChild(iframe);
        }, 100);
    };
}

export function toPrint(frameWindow) {
    try {
        setTimeout(function () {
            frameWindow.focus();
            try {
                if (!frameWindow.document.execCommand('print', false, null)) {
                    frameWindow.print();
                }
            } catch (e) {
                frameWindow.print();
            }
            frameWindow.close();
        }, 10);
    } catch (err) {
        console.log('err', err);
    }
}

// 可以打印 无法去除其它模块
export function printIframe(html) {
    var bdhtml = window.document.body.innerHTML;
    // window.document.body.innerHTML = html; //重新给页面内容赋值；
    let iframe = document.getElementById('iframe');
    iframe.focus();
    // iframe.contentWindow.document.body.innerHTML = html
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
}

// 无法打印 echart 图
export function printHtml(html) {
    const style = getStyle();
    const container = getContainer(html);

    document.body.appendChild(style);
    document.body.appendChild(container);
    let th = window;
    getLoadPromise(container)
        .then(() => {
            th = window;
        })
        ['finally'](() => {
            window.print();
            document.body.removeChild(style);
            document.body.removeChild(container);
        });
}

// 设置打印样式
export function getStyle() {
    const styleContent = `#print-container {
    display: none
}
@media print {
    body > :not(.print-container) {
        display: none
    }
    html,
    body {
        display: block !important;
        height: auto
    }
    #print-container {
        display: block
    }
    @page {
      margin: 10mm;
    }
}`;
    const style = document.createElement('style');
    style.innerHTML = styleContent;
    return style;
}

// 清空打印内容
function cleanPrint() {
    const div = document.getElementById('print-container');
    if (div) {
        document.querySelector('body').removeChild(div);
    }
}

// 新建DOM，将需要打印的内容填充到DOM
export function getContainer(html) {
    cleanPrint();
    const container = document.createElement('div');
    container.setAttribute('id', 'print-container');
    container.innerHTML = html;
    return container;
}

// 图片完全加载后再调用打印方法
export function getLoadPromise(dom) {
    let imgs = dom.querySelectorAll('img');
    imgs = [].slice.call(imgs);
    if (imgs.length === 0) {
        return Promise.resolve();
    }

    let finishedCount = 0;
    return new Promise((resolve) => {
        function check() {
            finishedCount++;
            if (finishedCount === imgs.length) {
                resolve();
            }
        }

        imgs.forEach((img) => {
            img.addEventListener('load', check);
            img.addEventListener('error', check);
        });
    });
}