在工作中遇到这样一个需求，客户要求： 1、实现在浏览器中打印和导出到word中，要求浏览器打印出来的效果和word中打印的效果基本一致。2、打印的内容要自动分页，第一页的顶部有文件头，最后一页的底部有页尾。
这里记录一下实现的步骤：
首先明确几件事：
- 电脑屏幕一英寸面积内有72个点
- 1英寸＝2.54厘米 = 72个点(point、磅) 即：1in= 2.54cm= 72pt
- 在Windows系统的默认采用的是分辨率是96，也就是一英寸96个像素点，这样磅和像素的换算关系是1pt = 96/72 px。
- A4纸规格尺寸为210mm×297mm
- word中的 1倍行距，指的是1倍于行网格的大小；CSS中的line-height是当前字体大小为基准来计算。
通过以上计算后可得A4纸96dpi下的分辨率约为794px×1123px，这是我们在制作网页的时候需要的像素。
需求中Word文档取边距为上下2.54cm，左右2.54cm，去掉边距在网页中要打印的内容应为 601px* 930px。
更简单的方法，使用类似photoshop的工具新建文件，直接能够得出以上答案。
由于网页本身支持pt做单位，之后会用pt为单位实现这个需求，下图为去掉页边距后网页的尺寸
字体单位大小对照换算表
前端实现
- 使用插件html-docx-js和file-saver实现导出word功能
- 使用媒体查询针对打印样式设置，并针对差异设置打印的样式覆盖掉之前的默认样式。
css中设置纸张、方向、页边距@media print {@page {size: A4 portrait; margin: 2.54cm 2.54cm;} }
把指定内容置于最后一页的页尾
基本思路是使用dom获取网页内容的高度，单位是像素，我们每页的高度是930px,取余后得到尾页的高度，通过在加入空行<br>来调整尾页高度接近930px（不能超过）。
通过各种尝试，效果基本实现了，不过还有些瑕疵，再调整吧。
未完待续…
