Bootstrap

vue调用日期_Vue 前端开发——打印功能实现 原创

61be5171bd126bf9b03e5dc3b53ba5ba.gif

业务场景常见于一些订单记录发票等的一些pdf 打印,保留了样式,可以打印彩色内容也可以打印黑白内容,如果业务复杂的比如添加水印的目前不支持,一般会特定处理,通过canvas 的方式处理。

封装打印脚本

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 (dom instanceof 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 += " +
(this.options.noPrint ? this.options.noPrint : ".no-print") +
"{display:none;}";
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 

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;