- A+
所属分类：Web前端
1、浏览器打印相对还是比较简单的，但也导致控制起来就麻烦。对于简单的打印需求直接用js调用window.print()即可。如果想要更好的控制打印结果，那这个就不能满足了。
2、市面上有挺多专门做打印功能的商用插件，要不收费，要不免费版阉割有水印，这在公司里使用自然是不行的。也有第三方的插件可用。但如果能自己去封装组件的话，要控制起来自然就更爽了。所以本篇介绍一个打印插件，用vue方式封装，直接js也是简单改改可用，毕竟知道原理才是重点。抛开浏览器的限制，比如在nw和electron项目中，就可以直接调用底层api通过打印指令打印，这就在此不表，后续可以专门在写一篇这个的打印。
3.浏览器控制打印样式和页面布局是不同的，核心就是尺寸，字体和分页这些。尺寸单位在网页上是px单位，打印用的毫米(mm),比如A4纸尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸
所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。一般页面样式和打印样式会不同，打印样式可用媒体查询@media print {}设置或者单独指定print文件使用。字体看打印机支持，一般微软雅黑和黑体比较好，分页也就是一个样式：page-break-after:always；可以单独用个空元素设置，以下是使用和vue组件的代码。
一、在vue主main.js文件引用组件
import print from '@/utils/print.js' Vue.use(print)
二、需要打印的页面内容元素
<div ref="printContent" class="orderPrint-box"> <div>表格布局之类的内容</div> <!--主动控制分页--> <div style="page-break-after:always"></div> </div>
三、点击事件调用打印功能
this.$print(this.$refs.printContent);
四、打印样式样式使用，单独文件处理printstylesheet.css,引用方式：@import url("./printstylesheet.css") print;页面部分样式如下：
.orderPrint-box{ width: 210mm; //控制打印宽度 font-size: 13px; height: auto; color: #000000; font-family: "黑体","Microsoft JhengHei","STSong-Light","STHeiti","FangSong_GB2312"; /* border: red 1px solid; */ margin: 0 auto; padding-top: 6mm; padding-left: 5mm; padding-right: 5mm; font-weight: normal; }
五、vue打印组件print.js的源码如下：
// 打印类属性、方法定义 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>"; //str += "<style>html,body,div{height: auto!important;margin:0;padding:0}</style>"; str += "<style>html,body,div{height: auto;margin:0;padding:0}</style>"; return str; }, getHtml: function () { var inputs = document.querySelectorAll('input'); var textareas = document.querySelectorAll('textarea'); var selects = document.querySelectorAll('select'); var canvass = document.querySelectorAll('canvas'); var isNeedRemove = document.querySelectorAll('.isNeedRemove') 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++) { console.log(isNeedRemove) 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') } } } } } //canvass echars图表转为图片 for (var k4 = 0; k4 < canvass.length; k4++) { if (isNeedRemove.length == 0) { var imageURL = canvass[k4].toDataURL("image/png"); var img = document.createElement("img"); img.src = imageURL; img.setAttribute('style', 'max-width: 100%;'); img.className = 'isNeedRemove' canvass[k4].style.display = 'none' // canvass[k4].parentNode.style.width = '100%' // canvass[k4].parentNode.style.textAlign = 'center' canvass[k4].parentNode.insertBefore(img, canvass[k4].nextElementSibling); } } //做分页 //style="page-break-after: always" // var pages = document.querySelectorAll('.result'); // for (var k5 = 0; k5 < pages.length; k5++) { // pages[k5].setAttribute('style', 'page-break-after: always'); // } return this.dom.outerHTML; }, 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); } }, isDOM: (typeof HTMLElement === 'object') ? function (obj) { return obj instanceof HTMLElement; } : function (obj) { return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'; } }; //注册为vue插件 const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 4. 添加实例方法 Vue.prototype.$print = Print } export default MyPlugin
原文支持，谢谢！
