Vue integriert PDF.js, um eine PDF-Vorschau zu implementieren und Schritte zum Hinzufügen von Wasserzeichen durchzuführen

Ergebnisse erzielen

Einführung in die verfügbaren Plugins

Mozilla stellt PDF.js und pdfjs-dist bereit. Die Unterschiede zwischen den beiden sind wie folgt:

• PDF.js, ein vollständiger PDF-Viewer, kann die von ihm bereitgestellte Datei viewer.html direkt verwenden, um PDF-Inhalte einschließlich vollständiger Stile und zugehöriger Funktionen anzuzeigen. Der Vorteil liegt in der schnellen Integration und darin, dass Sie die Funktionen und Stile des Viewers nicht selbst implementieren müssen. Der Nachteil besteht darin, dass es mühsam wird, wenn Sie Stil und Funktionen anpassen möchten.
• pdfjs-dist, eine vorgefertigte Version von PDF.js, enthält nur die Rendering-Funktion für PDF-Inhalte. Den Viewer-Stil und zugehörige Funktionen müssen Sie selbst implementieren.

vue-pdf, empfohlen von Awesome Vue.js, der offiziellen Vue-Plugin-Bibliothek, ist eine Kapselung von pdfjs-dist. Im Allgemeinen können Sie vue-pdf verwenden, um schnell PDF-Vorschaueffekte zu erzielen.

Wählen Sie Plug-Ins entsprechend Ihren Anforderungen aus

Unsere Anforderung besteht darin, dem PDF-Inhalt ein Wasserzeichen hinzuzufügen, während wir die PDF-Vorschau auf der vorhandenen Seite implementieren.

Die Vollversion von PDF.js ist zu aufgebläht. Obwohl vue-pdf den Vorschaueffekt schnell erzielen kann, muss es die Leinwand, auf der das PDF angezeigt wird, beim Hinzufügen eines Wasserzeichens zweimal rendern. Nach dem Versuch wurde festgestellt, dass der Fehler „Ausführen von ‚drawImage‘ auf ‚CanvasRenderingContext2D‘ fehlgeschlagen: Überladungsauflösung fehlgeschlagen“ ausgegeben wird.

Am Ende habe ich mich für die direkte Integration von pdfjs-dist entschieden, um alle Funktionen zu vervollständigen

Plugins installieren und importieren

Installieren

Garn fügt pdfjs-dist hinzu

Einführung

workerSrc muss manuell angegeben werden, andernfalls wird die Fehlermeldung „Einrichten des Fake-Workers fehlgeschlagen“ ausgegeben.

Obwohl die Datei im lokalen Verzeichnis node_modules/pdfjs-dist/build/pdf.worker.js vorhanden ist, wird beim tatsächlichen Importieren dennoch ein Fehler gemeldet, sodass Sie pdf.worker.js nur unter der CDN-Adresse verwenden können. Sie können die Flexibilität des Imports erhöhen, indem Sie PDFJS.version übergeben.

importiere * als PDFJS aus „pdfjs-dist“

PDFJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.js`

Plugin initialisieren

Ein Canvas-Knoten zum Rendern von Inhalten

<canvas id="pdfCanvas"></canvas>

Zum Empfangen der PDFJS-Instanz verwendetes Objekt

Requisiten: {
 // Die eigentliche Link-URL der PDF-Datei: {
 Typ: Zeichenfolge
 }
},
Daten () {
 zurückkehren {
 Gesamtseite: 1,
 // PDFJS-Instanz pdfDoc: null
 }
},
Methoden: {
 _initPdf() {
 PDFJS.getDocument(diese.url).promise.then(pdf => {
 // Dokumentobjekt this.pdfDoc = pdf
 //Gesamtzahl der Seiten this.totalPage = pdf.numPages
 // Rendere die Seite this.$nextTick(() => {
 diese._renderPage()
 })
 })
 }
}

Auf Linkänderungen achten und Instanzen initialisieren

Wenn die externe eingehende URL gültig ist, kann die Initialisierungsfunktion des PDF-Viewers ausgelöst werden

betrachten:
 'URL' (Wert) {
 wenn (!val) {
 zurückkehren
 }

 dies._initPdf()
 }
},

Rendern von PDF-Inhalten

Holen Sie sich das aktuelle Seitenverhältnis, um die tatsächliche Breite und Höhe des Inhalts zu berechnen

Methoden: {
 _getRatio(ctx) {
 lass dpr = window.devicePixelRatio || 1
 sei bsr =
 ctx.webkitBackingStorePixelRatio ||
 ctx.mozBackingStorePixelRatio ||
 ctx.msBackingStorePixelRatio ||
 ctx.oBackingStorePixelRatio ||
 ctx.backingStorePixelRatio ||
 1

 Rückkehr dpr / bsr
 }
}

Aktuelle Seite rendern

Der Maßstab in page.getViewport({ scale }) ist sehr wichtig und hängt direkt damit zusammen, ob der gerenderte Inhalt den gesamten übergeordneten Container ausfüllen kann. Daher werden hier jeweils die Breite des übergeordneten Containers und die der Seite selbst ermittelt. Das Verhältnis der Breite des übergeordneten Containers zur Seitenbreite ist das Verhältnis, um wie viel die eigentliche Seite vergrößert werden muss.

page.view ist ein Array mit vier Werten: X-Achsen-Versatz, Y-Achsen-Versatz, Breite und Höhe. Um die tatsächliche Breite zu erhalten, müssen Sie auch das aktuelle Seitenverhältnis berücksichtigen. Verwenden Sie daher page.view[2] * ratio, um die tatsächliche Breite zu berechnen.

Daten () {
 zurückkehren {
 aktuelleSeite: 1,
 Gesamtseite: 1,
 Breite: 0,
 Höhe: 0,
 pdfDoc: null
 }
},
Methoden: {
 _renderPage() {
 dies.pdfDoc.getPage(diese.currentPage).then(page => {
 let canvas = document.querySelector('#pdfCanvas')
 lass ctx = canvas.getContext('2d')
 // Seitenverhältnis abrufen let ratio = this._getRatio(ctx)

 // Das Verhältnis der Seitenbreite zur Ansichtsfensterbreite ist das Vergrößerungsverhältnis des Inhaltsbereichs let dialogWidth = this.$refs['pdfDialog'].$el.querySelector('.el-dialog').clientWidth - 40
 let pageWidth = page.view[2] * ratio
 let scale = Dialogbreite / Seitenbreite

 let viewport = page.getViewport({ Skala })

 // Notieren Sie die Breite und Höhe des Inhaltsbereichs. Dies wird später beim Hinzufügen eines Wasserzeichens benötigt. this.width = viewport.width * ratio
 diese.Höhe = Ansichtsfensterhöhe * Verhältnis

 canvas.width = diese.breite
 canvas.height = diese.höhe

 // Skalierungsverhältnis ctx.setTransform(ratio, 0, 0, ratio, 0, 0)

 Seite.render({
 Leinwandkontext: ctx,
 Ansichtsfenster
 }).promise.then(() => {})
 })
 }
}

Implementieren von Seitensprüngen

Bereiten Sie die Rendering-Warteschlange vor, um Verwirrung bei der Rendering-Reihenfolge zu vermeiden

Beim Auslösen eines Seitensprungs wird die Funktion _renderQueue() aufgerufen, statt direkt die Funktion _renderPage() aufzurufen, denn ob mit dem Rendern begonnen werden soll, hängt davon ab, ob aktuell keine Seite gerendert wird.

Daten () {
 zurückkehren {
 // Ist es in der Warteschlange? Rendering: false
 }
},
Methoden: {
 _renderQueue() {
 wenn (dieses.rendering) {
 zurückkehren
 }

 diese._renderPage()
 }
}

Ändern des Warteschlangenstatus beim Rendern einer Seite

Methoden: {
 _renderPage() {
 // Warteschlange startet this.rendering = true

 dies.pdfDoc.getPage(diese.currentPage).then(page => {
 // ... lasse den Implementierungscode page.render({ weg
 Leinwandkontext: ctx,
 Ansichtsfenster
 }).promise.then(() => {
 // Warteschlange endet this.rendering = false
 })
 })
 }
}

Implementierung der Seitenumblätterfunktion

Daten () {
 zurückkehren {
 aktuelleSeite: 1,
 Gesamtseite: 1
 }
},
berechnet: {
 // Ist es die Startseite firstPage () {
 returniere diese.aktuelleSeite <= 1
 },
 // Ist es die letzte Seite lastPage () {
 gib diese.aktuelleSeite >= diese.gesamteSeite zurück
 },
},
Methoden: {
 // Zur Startseite springen firstPageHandler () {
 if (diese.ersteSeite) {
 zurückkehren
 }

 diese.aktuelleSeite = 1
 this._renderQueue()
 },
 // Zur letzten Seite springen lastPageHandler () {
 if (diese.letzteSeite) {
 zurückkehren
 }

 diese.aktuelleSeite = diese.gesamteSeite
 this._renderQueue()
 },
 // Vorherige Seite previousPage () {
 if (diese.ersteSeite) {
 zurückkehren
 }

 diese.aktuelleSeite--
 this._renderQueue()
 },
 // Nächste Seite nextPage () {
 if (diese.letzteSeite) {
 zurückkehren
 }

 diese.aktuelleSeite++
 this._renderQueue()
 }
}

Fügen Sie dem Seiteninhalt ein gekacheltes Textwasserzeichen hinzu

Es besteht kein Zweifel, dass die Möglichkeit zum Hinzufügen von Wasserzeichen im Frontend darin besteht, zum Zeichnen eine Leinwand zu verwenden.

Die erste Lösung bestand darin, ein Div als transparente Maskenebene vorzubereiten, um die obere Ebene des Inhaltsbereichs zu blockieren, und dann mit canvas.toDataURL('image/png') das von Canvas gezeichnete Wasserzeichen in das Base64-Format zu exportieren und es als Hintergrundbild der Maskenebene zu kacheln. Obwohl der Effekt erzielt werden kann, kann diese Methode das Wasserzeichen entfernen, indem Sie einfach die Browserkonsole öffnen und die Maskenebene löschen.

Dann habe ich beim Zeichnen eines anderen Canvas durch ein Canvas herausgefunden, dass Canvas tatsächlich ein Canvas als Bild auf sich selbst zeichnen kann, also bin ich auf die folgende Lösung gekommen.

Zeichnen Sie die Leinwand als Wasserzeichen

Da es sich um eine Komponente handelt, wird der Wasserzeichentext „Wasserzeichen“ von außen übergeben.

Die Leinwand zum Zeichnen des Wasserzeichens muss der Seite nicht hinzugefügt werden. Nachdem das Zeichnen abgeschlossen ist, kann das DOM-Element direkt zurückgegeben werden. Beachten Sie, dass das zurückgegebene DOM-Element und nicht die mit getContext(2d) abgerufene Leinwandinstanz ist.

ctx.fillStyle gibt die Transparenz des Textes an. ctx.fillText(this.watermark, 50, 50) gibt die Position des Textes auf der Leinwand an. Der erste Wert ist der Textinhalt, der zweite Wert ist der Versatz der X-Achse und der dritte Wert ist der Versatz der Y-Achse.

Requisiten: {
 Wasserzeichen:
 Typ: Zeichenfolge,
 Standard: „asing1elife“
 }
},
Methoden: {
 _initWatermark() {
 let canvas = document.createElement('canvas');
 Leinwandbreite = 200
 Leinwandhöhe = 200

 lass ctx = canvas.getContext('2d')
 ctx.rotate(-18 * Math.PI / 180)
 ctx.font = "14px Vedana"
 ctx.fillStyle = "rgba(200, 200, 200, .3)"
 ctx.textAlign = "links"
 ctx.textBaseline = "Mitte"
 ctx.fillText(dieses.Wasserzeichen, 50, 50)

 Leinwand zurückgeben
 }
}

Kachelt das Wasserzeichen in die Leinwand ein, die den Inhalt rendert

Diese Methode basiert auf mehreren Methoden der HTML5-Canvas-Kachelung. Die Breite und Höhe in ctx.rect(0, 0, this.width, this.height) sind die tatsächliche Breite und Höhe des Seiteninhaltsbereichs, die in der Funktion _renderPage() aufgezeichnet wurden. Solange die tatsächliche Breite und Höhe übergeben werden, realisiert die Leinwand automatisch die Anzahl der Wiederholungen auf der X- und Y-Achse entsprechend der Größe des Wasserzeichenbildes und der Größe des Inhaltsbereichs.

Methoden: {
 _renderWatermark() {
 let canvas = document.querySelector('#pdfCanvas')
 lass ctx = canvas.getContext('2d')

 // Gekacheltes Wasserzeichen let pattern = ctx.createPattern(this._initWatermark(), 'repeat')
 ctx.rect(0, 0, diese.Breite, diese.Höhe)
 ctx.fillStyle = Muster
 ctx.fill()
 }
}

Nachdem der Seiteninhalt gerendert wurde, wird das Rendern des Wasserzeichens erneut ausgelöst

Methoden: {
 // Rendern von page_renderPage () {
 dies.pdfDoc.getPage(diese.currentPage).then(page => {
 // ... lasse den Implementierungscode page.render({ weg
 Leinwandkontext: ctx,
 Ansichtsfenster
 }).promise.then(() => {
 // Wasserzeichen rendern this._renderWatermark()
 })
 })
 }
}

Oben sind die Details der Vue-Integration von PDF.js zur Realisierung einer PDF-Vorschau und zum Hinzufügen von Wasserzeichen aufgeführt. Weitere Informationen zur Vue-Implementierung einer PDF-Vorschau und zum Hinzufügen von Wasserzeichen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!