vue项目中增加打印功能

export default function printFile(html) {
    let userAgent = navigator.userAgent;
    if (
        (userAgent.indexOf("compatible") > -1 &&
            userAgent.indexOf("MSIE") > -1) ||
        userAgent.indexOf("Edge") > -1 ||
        (userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1)
    ) {
        // IE浏览器
        let page = window.open("", "_blank"); // 打开一个新窗口,用于打印
        page.document.write(html); // 写入打印页面的内容
        page.document.execCommand("print");
        page.close(); // 关闭打印窗口
    } else {
        console.log("not IE");
        let doc = document.getElementById('printf');
        if (doc) {
            document.getElementById("app").removeChild(doc)
        }
        let iframe = document.createElement("iframe");
        iframe.id = "printf";
        iframe.style.width = "0";
        iframe.style.height = "0";
        document.getElementById("app").appendChild(iframe);
        iframe.contentWindow.document.write(html);
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
    }
}

使用的时候在相应的vue文件中引入  然后在自己的打印事件中调用此方法,传入的参数为你拼接的html片段

原文地址:https://www.cnblogs.com/samsara-yx/p/11686578.html