先通过 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;left:0px;top:0px;z-index:99;";
        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
在打印时，打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候需要减去页边距。
  
分类：
 前端
 
标签：
 
前端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    QCFaner
        Web前端开发