在工作中遇到这样一个需求,客户要求: 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;
}
}
未完待续…