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

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

window.print() 默认效果缺陷

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

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

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

打印样式优化

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

print 样式加载的4种方式

1.<link rel="stylesheet" href="" media="print">

2.@import url print

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

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

4.通过媒体查询 @media

去除页眉页脚

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

@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

示例：

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

封装 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 < styles.length; i++) { str += styles[i].outerHTML; } str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>"; return str; }, getHtml: function () { var inputs = document.querySelectorAll('input'); var textareas = document.querySelectorAll('textarea'); var selects = document.querySelectorAll('select'); for (var k = 0; k < inputs.length; k++) { if (inputs[k].type == "checkbox" || inputs[k].type == "radio") { if (inputs[k].checked == true) { inputs[k].setAttribute('checked', "checked") } else { inputs[k].removeAttribute('checked') } } else if (inputs[k].type == "text") { inputs[k].setAttribute('value', inputs[k].value) } else { inputs[k].setAttribute('value', inputs[k].value) } } for (var k2 = 0; k2 < textareas.length; k2++) { if (textareas[k2].type == 'textarea') { textareas[k2].innerHTML = textareas[k2].value } } for (var k3 = 0; k3 < selects.length; k3++) { if (selects[k3].type == 'select-one') { var child = selects[k3].children; for (var i in child) { if (child[i].tagName == 'OPTION') { if (child[i].selected == true) { child[i].setAttribute('selected', "selected") } else { child[i].removeAttribute('selected') } } } } } // 包裹要打印的元素 // fix: https://github.com/xyl66/vuePlugs_printjs/issues/36 let outerHTML = this.wrapperRefDom(this.dom).outerHTML return outerHTML; }, // 向父级元素循环，包裹当前需要打印的元素 // 防止根级别开头的 css 选择器不生效 wrapperRefDom: function (refDom) { let prevDom = null let currDom = refDom // 判断当前元素是否在 body 中，不在文档中则直接返回该节点 if (!this.isInBody(currDom)) return currDom while (currDom) { if (prevDom) { let element = currDom.cloneNode(false) element.appendChild(prevDom) prevDom = element } else { prevDom = currDom.cloneNode(true) } currDom = currDom.parentElement } return prevDom }, writeIframe: function (content) { var w, doc, iframe = document.createElement('iframe'), f = document.body.appendChild(iframe); iframe.id = "myIframe"; //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;"; iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;'); w = f.contentWindow || f.contentDocument; doc = f.contentDocument || f.contentWindow.document; doc.open(); doc.write(content); doc.close(); var _this = this iframe.onload = function(){ _this.toPrint(w); setTimeout(function () { document.body.removeChild(iframe) }, 100) } }, toPrint: function (frameWindow) { try { setTimeout(function () { frameWindow.focus(); try { if (!frameWindow.document.execCommand('print', false, null)) { frameWindow.print(); } } catch (e) { frameWindow.print(); } frameWindow.close(); }, 10); } catch (err) { console.log('err', err); } }, // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身 isInBody: function (node) { return (node === document.body) ? false : document.body.contains(node); }, isDOM: (typeof HTMLElement === 'object') ? function (obj) { return obj instanceof HTMLElement; } : function (obj) { return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'; }};const MyPlugin = {}MyPlugin.install = function (Vue, options) { // 4. 添加实例方法 Vue.prototype.$print = Print}export default MyPlugin

其 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 的个人主页 - 文章 - 掘金