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

业务场景常见于一些订单记录发票等的一些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