Zwei Methoden zum Implementieren der automatischen Seitennummerierung beim Vue-Seitendruck

// Klassenattribute und Methodendefinitionen drucken/* eslint-disable */
const Print = Funktion (dom, Optionen) {
  if (!(diese Instanz von Print)) returniere neues Print(dom, Optionen);

  diese.Optionen = diese.erweitern({
    'keinDrucken': '.keinDrucken'
  }, Optionen);

  wenn ((Typ von dom) === "Zeichenfolge") {
    Dies.dom = document.querySelector(dom);
  } anders {
    dies.istDOM(dom)
    dies.dom = dies.isDOM(dom) ? dom : dom.$el;
  }

  dies.init();
};
Drucken.prototype = {
  init: Funktion () {
    var Inhalt = this.getStyle() + this.getHtml();
    dies.writeIframe(Inhalt);
  },
  erweitern: Funktion (Objekt, Objekt2) {
    für (var k in obj2) {
      obj[k] = obj2[k];
    }
    gibt Objekt zurück;
  },

  getStyle: Funktion () {
    var str = "",
      Stile = document.querySelectorAll('Stil, Link');
    für (var i = 0; i < Stile.Länge; i++) {
      str += Stile[i].äußeresHTML;
    }
    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    str += "<style>html,body,div{height: auto!important;font-size:12px}</style>";

    gibt str zurück;
  },

  getHtml: Funktion () {
    var Eingaben = document.querySelectorAll('Eingabe');
    var textareas = document.querySelectorAll('textarea');
    var wählt = document.querySelectorAll('Auswählen');

    für (var k = 0; k < Eingaben.Länge; k++) {
      wenn (Eingaben[k].Typ == "Kontrollkästchen" || Eingaben[k].Typ == "Radio") {
        wenn (Eingaben[k].checked == true) {
          inputs[k].setAttribute('aktiviert', "aktiviert")
        } anders {
          Eingaben[k].removeAttribute('aktiviert')
        }
      } sonst wenn (Eingaben[k].Typ == "Text") {
        Eingaben[k].setAttribute('Wert', Eingaben[k].Wert)
      } anders {
        Eingaben[k].setAttribute('Wert', Eingaben[k].Wert)
      }
    }

    für (var k2 = 0; k2 < Textbereiche.Länge; k2++) {
      wenn (Textbereiche[k2].Typ == 'Textbereich') {
        Textbereiche[k2].innerHTML = Textbereiche[k2].Wert
      }
    }

    für (var k3 = 0; k3 < selects.length; k3++) {
      wenn (wählt[k3].Typ == 'select-one') {
        var Kind = wählt[k3].Kinder;
        für (var i in Kind) {
          wenn (Kind[i].tagName == 'OPTION') {
            wenn (Kind[i].selected == true) {
              Kind[i].setAttribute('ausgewählt', "ausgewählt")
            } anders {
              Kind[i].removeAttribute('ausgewählt')
            }
          }
        }
      }
    }
    gib this.dom.outerHTML zurück;
    // Das zu druckende Element umschließen // Fix: https://github.com/xyl66/vuePlugs_printjs/issues/36
    // lass outerHTML = this.wrapperRefDom(this.dom).outerHTML
    // äußeresHTML zurückgeben;
  },
  // Schleife zum übergeordneten Element und umschließe das Element, das gedruckt werden soll // Verhindere, dass der CSS-Selektor am Anfang der Stammebene wirksam wird wrapperRefDom: function (refDom) {
    let prevDom = null
    lass currDom = refDom
    // Bestimmen Sie, ob sich das aktuelle Element im Textkörper befindet. Wenn nicht im Dokument, geben Sie den Knoten direkt zurück, wenn (!this.isInBody (currDom)) return currDom

    während (aktuellerDom) {
      wenn (vorherigerDom) {
        let-Element = currDom.cloneNode(false)
        element.appendChild(vorherigerDom)
        vorherigerDom = Element
      } anders {
        vorherigerDom = currDom.cloneNode(true)
      }

      currDom = currDom.übergeordnetesElement
    }

    Zurück zum vorherigen Dom
  },

  writeIframe: Funktion (Inhalt) {
    var w, doc, iframe = Dokument.createElement('iframe'),
      f = Dokument.Body.AnhängenUntergeordnetesElement(iframe);
    iframe.id = "meinIframe";
    //iframe.style = "Position:absolut;Breite:0;Höhe:0;oben:-10px;links:-10px;";
    iframe.setAttribute('Stil', 'Position:absolut;Breite:0;Höhe:0;oben:-10px;links:-10px;');
    w = f.Inhaltsfenster || f.Inhaltsdokument;
    doc = f.Inhaltsdokument || f.Inhaltsfenster.document;
    doc.öffnen();
    doc.write(Inhalt);
    doc.schließen();
    var _this = dies
    iframe.onload = Funktion(){
      _this.toPrint(w);
      setzeTimeout(Funktion () {
        Dokument.Body.RemoveChild(iframe)
      }, 100)
    }
  },

  toPrint: Funktion (Rahmenfenster) {
    versuchen {
      setzeTimeout(Funktion () {
        Rahmenfenster.Fokus();
        versuchen {
          wenn (!frameWindow.document.execCommand('print', false, null)) {
            Rahmenfenster.drucken();
          }
        } fangen (e) {
          Rahmenfenster.drucken();
        }
        Rahmenfenster.schließen();
      }, 10);
    } fangen (Fehler) {
      console.log('err', err);
    }
  },
  //Überprüfen Sie, ob ein Element ein Nachkomme des Body-Elements und nicht das Body-Element selbst ist. isInBody: function (node) {
    return (Knoten === Dokument.Body) – false: Dokument.Body.contains(Knoten);
  },
  isDOM: (Typ des HTML-Elements === „Objekt“)?
    Funktion (Objekt) {
      gibt ein Objekt der Instanz des HTMLElements zurück;
    } :
    Funktion (Objekt) {
      returniere Objekt && Objekttyp === 'Objekt' && Objekt.Knotentyp === 1 && Objekttyp.Knotenname === 'Zeichenfolge';
    }
};
const MyPlugin = {}
MyPlugin.install = Funktion (Vue, Optionen) {
  // 4. Instanzmethode hinzufügen Vue.prototype.$printPage = Print
}
Standard-MyPlugin exportieren

Export-Standardfunktion printHtml(html) {
  lass Stil = getStyle();
  : Container = getContainer(html);
 
  Dokument.Body.AppendChild(Stil);
  Dokument.Body.AnhängenUntergeordnetesElement(Container);
  getLoadPromise(container).then(() => {
    fenster.drucken();
    Dokument.Body.removeChild(Stil);
    Dokument.Body.RemoveChild(Container);
  });
}
 
//Druckstil festlegen Funktion getStyle() {
let styleContent = `#Druckcontainer {
    Anzeige: keine;
}
@media drucken {
    body > :nicht(.print-container) {
        Anzeige: keine;
    }
    html,
    Körper {
      Rand: 0 0,2cm;
      Anzeige: Block !wichtig;
      Höhe: automatisch;
    }
    #Druckcontainer {
        Anzeige: Block;
    }
    @Seite {
      Rand: 0,25 cm 0;
    }
}`;
  let style = document.createElement("Stil");
  style.innerHTML = Stilinhalt;
  Rückgabestil;
}
 
// Lösche den Druckinhalt Funktion cleanPrint() {
  let div = document.getElementById('Druckcontainer')
  wenn (!!div) {
    Dokument.QuerySelector('body').removeChild(div)
  }
}
 
//Erstellen Sie ein neues DOM und füllen Sie den zu druckenden Inhalt in das DOM
Funktion getContainer(html) {
  sauberDrucken()
  let container = document.createElement("div");
  container.setAttribute("id", "Druckcontainer");
  Container.innerHTML = html;
  Rücknahmebehälter;
}
 
// Rufe die Druckmethode auf, nachdem das Bild vollständig geladen ist. Funktion getLoadPromise(dom) {
  let imgs = dom.querySelectorAll("img");
  imgs = [].slice.call(imgs);
 
  wenn (Bildlänge === 0) {
    gibt Promise.resolve() zurück;
  }
 
  lass fertigeAnzahl = 0;
  gib ein neues Versprechen zurück (Auflösen => {
    Funktion check() {
      fertigeAnzahl++;
      if (finishedCount === imgs.length) {
        lösen();
      }
    }
    imgs.forEach(img => {
      img.addEventListener("laden", prüfen);
      img.addEventListener("Fehler", prüfen);
    })
  });
}