基于qrcodejs2 + VXETable.print实现浏览器打印二维码功能

1.封装一个观察dom元素变化的函数，观察用于生成二维码的容器元素。

const observeQRCodeDom = (observedEl) => {
    return new Promise((resolve, reject) => {
        // 配置观察选项
        const config = { attributes: true, childList: true, subtree: true };
        // 监听 DOM 变化
        const observer = new MutationObserver((mutations, observer) => {
            // 如果二维码容器有子元素，则认为二维码生成成功
            if (observedEl.childNodes.length > 0) {
                resolve();
                // 停止监听
                observer.disconnect();
                observer = null;
            }
        });
        // 传入目标节点和观察选项并开始观察
        observer.observe(observedEl, config);
    });
};

2.生成含有二维码html字符串内容 

const generateQRCodeContent = async (code) => {
    const tempDiv = document.createElement("div");
    new QRCode(tempDiv, {
        text: code, //二维码内容
        width: 100,
        height: 100
    });
    await observeQRCodeDom(tempDiv);
    return `
        ${tempDiv.outerHTML}
    `;
};

3.打印

// 调用打印方法
VXETable.print({
    /*
    * 被打印内容的样式字符串，仅在高版本浏览器中支持scss/less语法，在低版本浏览器中得使用css，否则                            
    * 可能造成打印时样式不生效的问题
    */
    style,
    // 被打印内容的html字符串
    content
});

4.注意事项

        4.1打印时被打印的html元素的某些样式如背景颜色等会丢失，需要加上以下代码进行着色。

* {
    /* 兼容webkit浏览器 */
    -webkit-print-color-adjust: exact;
    /* 兼容火狐浏览器 */
    print-color-adjust: exact;
    color-adjust: exact;
}

        4.2可通过分别监听 window 的 beforeprint 和 afterprint 事件来监听浏览器打印面板的显示和隐藏，并不能监听打印的成功与否。