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
关注公众号“云海生活”获取更多技术分享
