浏览器打印遇到的一些坑....

做了三四天的浏览器打印....有点想吐血的感觉...不过总体来说还是有点收获的.

先看一下最终一些打印的预览图:

image.png

image.png

image.png

注意点:

背景色打印

.bg {
    -webkit-print-color-adjust: exact; /* 这一行必须要 */
    print-color-adjust: exact;
    background-color: green;
}

@page {
    size: landscape;
}

横竖打印，以及打印边距

portrait为竖着打 landscape为横着打

    Vue.prototype.GlobalPrint = function(title = '打印', printHtml, pageSet = {}) {
        // 打开一个新窗口
        const myWindow = window.open('', title);

        // 获取id为app内的html
        const bodyHtml = printHtml || window.document.getElementById('app').innerHTML;

        // 获取head标签内的html
        let headHtml = document.head.innerHTML;
        const pageStr = `
            
        `;
        headHtml += pageStr;
        // 头中的screen换成打印样式print
        headHtml = headHtml.replace('screen', 'screen, print');
        //重新写入文档流
        myWindow.document.write('');
        myWindow.document.write(headHtml);
        myWindow.document.write('');
        myWindow.document.write(bodyHtml);
        myWindow.document.write('

另外页眉页脚是没法通过浏览器自定义设置的，需要自己写div和样式。