天津市住房与城乡建设部网站wordpress 前端构建

在工作中遇到这样一个需求，客户要求： 1、实现在浏览器中打印和导出到word中，要求浏览器打印出来的效果和word中打印的效果基本一致。2、打印的内容要自动分页，第一页的顶部有文件头，最后一页的底部有页尾。

这里记录一下实现的步骤：
首先明确几件事：

• 1英寸＝25.4毫米 即1厘米=1/2.54英寸
• 分辨率是指是一英寸面积内像素的个数
• 在Windows系统的网页打印中默认采用的是96dpi，Mac系统中默认的是72dpi。
• A4纸规格尺寸为210mm×297mm

通过以上计算后可得A4纸96dpi下的分辨率约为793.7px×1122.5px，向下取整为宽793像素和高1122像素，这是我们在制作网页的时候需要的像素。
假设word中取边距为上下2.54cm，左右3.18cm，即向下边距1英寸，左右边距约1.25英寸，按96pdi计算，上下边距96px,左右边距约为120px。
宽793像素和高1122像素去掉边距，在网页中要打印的内容应为 553px* 930px。
更简单的方法，使用类似photoshop的工具新建文件，直接能够得出以上答案。


二、
浏览器打印机和导出word支持的样式,由于网页
使用媒体查询针对打印样式设置，要针对差异设置打印的样式覆盖掉之前的默认样式。
设置纸张、方向、页边距

@media print {@page {size: A4 portrait; margin: 2.54cm 3.18cm;}
}

未完待续…