网页打印标准 A3、A4 纸张尺寸设置最近开发项目时，有个需求是要打印包含待办事项的日历（ el-calendar ），

需求

最近开发项目时，有个需求是要打印包含待办事项的日历（ el-calendar ），打印到 A3 纸张上。最终效果如图：

思路

先通过 vue-pdf 导出为 PDF 文件，然后再打印 PDF 到 A3 纸上。过程中遇到的问题是：为了保证按照预期的页面样式进行打印输出，所以先要保证页面日历区域的大小正确。那么如何进行 A3 纸张 与 像素 之间进行换算呢？

在 公制长度单位 与 屏幕分辨率 进行换算时，必须用到一个DPI(Dot Per Inch)指标。获取屏幕 DPI 的方法为：

// 获取 DPI
function js_getDPI() {
    var arrDPI = new Array();
    if ( window.screen.deviceXDPI != undefined ) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement( "DIV" );
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild( tmpNode );
        arrDPI[0] = parseInt( tmpNode.offsetWidth );
        arrDPI[1] = parseInt( tmpNode.offsetHeight );
        tmpNode.parentNode.removeChild( tmpNode );
    }
    return arrDPI;
}

在浏览器控制台运行后，返回结果为：[96, 96]，那么说明当前屏幕的 DPI 为 96，既然 DPI 获取到了，就进行接下来的计算。

计算公式：

宽：`纸张宽 / 25.41 * DPI`
高：`纸张高 / 25.41 * DPI`

示例：

A4：尺寸：210mm × 297mm
A3：尺寸：297mm × 420mm

1英寸 = 25.41mm 换算

第一步：先转换成英尺
A4：8.264 × 11.688
A3：11.688 × 16.529

第二步：然后转换成像素(px)
A4：793 × 1122
A3：1122 × 1587

提示

在打印时，打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候需要减去页边距。