前端 window.print() 打印方案、优化策略总结

近期拿到一个需求，里面涉及到网页打印，本来以为执行浏览器自带的 window.print() 方法调取打印控件就好了，没想到事情并非那么简单, 打印预览中不仅样式不对，连内容都无法展示全，多页的内容只显示了一页，这明显无法满足项目需求啊！

于是研究了下相关的优化方案，整理如下：

window.print() 默认效果缺陷

1.打印控件默认没给分页，就只显示了一页

2.dom 布局和样式很容易发生错位、丢失

3.我想要局部打印，但默认是获取的整个 body.innerHtml 的内容

打印样式优化

这种方式是通过增加针对打印机及预览才识别的css代码来调整效果，css 引入的方式有下面几种

print 样式加载的4种方式

1.

2.@import url print

概述@import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import不能在条件组的规则中使用。因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的@import规则。这些条件导入在URI之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。语法@import url;@import url list-of-media-queries;

3.style 内联样式，注意依然要配置 media="print"

4.通过媒体查询 @media

去除页眉页脚

@media print {  @page {    margin: 0; // 可以控制打印布局（四周边距）  }  body {    border: 1px solid #999;  }}

@page 介绍

@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。

@page {  margin: 1cm;}@page :first {  margin: 2cm;}

控制分页

page-break-before: 控制在指定元素前是否分页

page-break-after: 控制在指定元素后是否分页

page-break-inside 控制指定元素中是否可以插入分页符

可选参数： always | auto | avoid | left | right | inherit

示例：

@media print {  @page {    margin: 0;  }  body {    border: 1px solid #999;  }  p {    page-break-after: always;  }}

封装 print.js 实现局部打印

既然打印的是 body 里的内容，那么我们可以手动创建一个 dom 元素，当执行 print() 时替换掉 body, print() 有两个生命周期勾子函数，分别是 beforeprint 和 afterprint, 在打印前替换dom 以实现打印我想要的 dom， 打印后重新恢复之前的 dom 就好了。

这种 github 上找了个案例，测试了下

// https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) {  if (!(this instanceof Print)) return new Print(dom, options);  this.options = this.extend({    'noPrint': '.no-print'  }, options);  if ((typeof dom) === "string") {    this.dom = document.querySelector(dom);  } else {    this.isDOM(dom)    this.dom = this.isDOM(dom) ? dom : dom.$el;  }  this.init();};Print.prototype = {  init: function () {    var content = this.getStyle() + this.getHtml();    this.writeIframe(content);  },  extend: function (obj, obj2) {    for (var k in obj2) {      obj[k] = obj2[k];    }    return obj;  },  getStyle: function () {    var str = "",      styles = document.querySelectorAll('style,link');    for (var i = 0; i  
其 100 多行就实现了刚才描述的效果，但是功能比较简单，不支持配置一些常用参数如自定义样式覆盖，而且我发现一个 bug,就是默认就给显示了 2 页，而此时内容其实很少，导致又一个空白页；不过可以在这个基础上拓展一下，还是不错的。
 
CLODOP 打印控件
 
据说功能很强大可以静默打印，但是不支持 mac系统，pass 官网
 
终极方案：printJS
 
这是我最终选定的方案，和上面那个简陋的js 封装函数相比，其提供了更多的功能配置，并可支持 pdf、html、image、json、raw-html 打印。
 
github 地址
 
使用也很简单：
 
npm install print-js --save// 以vue 为例 main.js import printJS from 'print-js'Vue.prototype.$printJS = printJS// 以 html 格式为例// 在vue 文件里直接this.$printJS({printable: 'elementId',type: 'html', : ['*']})
 
这个方案我在使用的时候也一度遇到了一个bug,是因为我用的 image 格式，基于 html-to-image 将网页元素转化为 png 图片，然后使用
 
this.$printJS({printable: image-url,type: 'image'})
 
来打印，用图片打印有个好处，就是样式不会错位，可是出现了一个报错： css的跨域，问题出在html-to-image 插件上，不使用这个插件就没这个bug 了。
 
css 跨域经常是由于 在js 内部使用了 link 标签引入css 样式，随着浏览器的安全要求越来越严格，现需要在link 上配置 crossOrigin="anonymous"。
 
还有个问题，我使用了内网 cdn 的情况下，打印预览中 css 样式全部丢失，暂不清楚原因，先放弃cdn 形式使用。
 
总结
 
网页打印的功能在一些 ims 系统中已经很常见，上面这几个优化方案都是最近遇到后临时研究后的成果，已经满足我们的项目需求，可能还有不足之处，仅可供参考。
 
技术问题欢迎交流 v: 1032151090 （备注来源）
 
原文首发地址： Ethan_Zhou 的个人主页 - 文章 - 掘金