JS获取DPI解决打印页面像素计算问题

一般电脑默认96DPI或72DPI，JS可以通过以下方法获取DPI的值：

function get_dpi() {
    for (var i = 56; i < 2000; i++) {
        if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
            return i;
        }
    }
}

有了DPI值就可以计算出毫米与像素之间的等值：

1毫米=DPI/25.4

因为DPI为每英寸长度内的像素点数，1英寸=25.4mm，所以DPI除以25.4就是1毫米的像素数。

根据以上，我们可以计算96DPI下的A4纸页面像素大小：

宽：210mm×(96/25.4)≈794px
高：297mm×(96/25.4)≈1123px

注意计算得到的结果是向上取整的，因此，如果指定页面的高度为1123px，打印时会显示2页，即多出一个空白页。

最好的办法还是在JS中为打印页面指定高度：

height = 297*(DPI/25.4)

有了毫米与像素的单位换算，以及页面的宽度、高度像素，就可以非常精确的控制打印页面样式了，实际上就是在编写一个宽794px和高1123px的页面。

注意：浏览器打印页面可以设置边距，默认情况下是有边距的，我们可以使用打印样式设置这个边距，从而将打印边距的控制权也掌握在自己手里。

@page {
    size: A4 portrait;
    margin: 0;
}

以上CSS样式设置打印页面大小为A4纸，纵向打印，横向打印为landscape，margin属性指定页边距。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。