Wie steuern Sie die obere und das Ende der Seiten in den Browser -Druckeinstellungen über JavaScript oder CSS?

Können JavaScript und CSS die Header und Fußzeile der Druckeinstellungen des Browsers steuern?

Viele Entwickler möchten JavaScript oder CSS verwenden, um Headerfußzeileneinstellungen in Browser -Druckdialogen zu steuern, z. B. standardmäßig das Unverwalten oder das Anpassen von Header -Fußzeilen -Inhalten. Dies ist jedoch keine leichte Aufgabe, und dieser Artikel wird seine Machbarkeit und Einschränkungen eingehend untersuchen.

Problemübersicht

Ziel ist es, die Header- und Fußzeilenoptionen in den Browser -Druckeinstellungen über Code zu steuern. Die spezifischen Anforderungen sind:

1. Die Header -Fußzeile wird standardmäßig deaktiviert: Die Kopfzeile im Drucken wird standardmäßig nicht standardmäßig angezeigt.
2. Benutzerdefinierte Headerfußzeile mit @media print : Benutzerdefinierte Headerfußzeile Inhalte mit @media print printstilregeln, diese Methode funktioniert jedoch nicht, wenn das printJS -Plugin verwendet wird.

Die vom Benutzer bereitgestellten Codeausschnitte sind wie folgt:

 html2canvas (this. $ refs.templatetoimg, {
  BackgroundColor: NULL,
  Usecors: wahr,
  Fensterheight: Document.body.ScrollHeight,
}). Dann (Canvas => {
  Dom.Style.Height = 'Calc (100VH - 400px)'
  Dom.Style.Overflow = 'Auto' '
  const url = canvas.todataurl ('Bild/JPG')
  this.img = url
  const styles = "@media print {@page {Höhe: 100%;@Top-Links {Inhalt: 'Top-Inhalt';}@Bottom-Center {Inhalt: 'Footer-Inhalt';}}}"
  printjs ({{
    druckbar: URL,
    Typ: 'Bild',
    documentTitle: this.previewtitle (),
    Stil: Stile,
    Onloading: () => {
      this.printloading = false
      Dom.Style.Height = 'Auto' '
      Dom.Style.Overflow = 'sichtbar'
    }
  })
})

Lösungen und Einschränkungen

Der Schlüssel ist, die folgenden Punkte zu verstehen:

1. Unkontrollierbarkeit der Browser -Druckeinstellungen: Die Browser -Druckeinstellungen (einschließlich Header und Fußzeilen) werden vom Browser selbst oder des Betriebssystems gesteuert, und JavaScript und CSS können nicht direkt eingreifen.
2. Einschränkungen von @media print : @media print kann den Druckstil steuern, kann jedoch die Druckeinstellungen des Browsers nicht direkt ändern. printJS -Plugin kann Styles ignorieren, die über @media print eingestellt sind.
3. Funktionen des printJS -Plug-Ins: printJS wird hauptsächlich zum Ausdrucken von HTML-Inhalten oder -bildern verwendet und unterstützt nicht direkt das Ändern von Browser-Druckeinstellungen. Im Code habe ich versucht, den @media print über style zu übergeben, aber es hat in printJS nicht gut funktioniert.

Daher lautet die Schlussfolgerung: JavaScript und CSS können die Header- und Fußzeilenoptionen für die Druckeinstellungen des Browsers nicht direkt steuern. Dies fällt in den Umfang der Berechtigungen des Browser- und Betriebssystems.

Um Header und Fußzeilen anzupassen, können Sie diese Elemente nur direkt zum Druckinhalt hinzufügen und sicherstellen, dass sie beim Drucken sichtbar sind und nicht vom Druck -Plugin betroffen sind. Entwickler müssen die Idee aufgeben, Browser -Druckeinstellungen direkt zu steuern und sich stattdessen auf die Implementierung von Headern und Fußzeilen im Druckinhalt selbst zu konzentrieren.

Das obige ist der detaillierte Inhalt vonWie steuern Sie die obere und das Ende der Seiten in den Browser -Druckeinstellungen über JavaScript oder CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!