Vue implementiert eine Online-Vorschau von PDF-Dateien (mithilfe von pdf.js/iframe/embed)

Vorwort

Ich arbeite derzeit an einem hochwertigen Kurs, der eine Online-Vorschau der Kursmaterialien in PPT erfordert. Unsere Idee ist, die PPT für die Online-Vorschau in PDF umzuwandeln. Die Frage ist also, wie man eine Online-Vorschau von PDF erhält.

Um die Wirkung besser darzustellen, habe ich während des Implementierungsprozesses verschiedene Methoden verwendet und mich schließlich für pdf.js entschieden, da es die beste Wirkung hatte.

Implementierungsmethode:

1: iframe

Betten Sie PDF mit Iframe in eine Webseite ein, um einen Vorschaueffekt zu erzielen. Die Idee ist gut und die Umsetzung einfach, aber die Anzeige ist grausam ...

Obwohl eine Codezeile kurz und klar ist und die Wirkung beim Öffnen von Google Chrome in Ordnung ist, sind die Mängel auch sehr offensichtlich! ! ! !

<iframe src="http......" width="100%"></iframe>

Mangel:

(1) Inkompatibel mit IE, da Iframe nicht standardisiert ist und IE es nicht mehr verwendet

(2) Download-Popup-Fenster! ! ! Jedes Mal, wenn Sie die Vorschau öffnen, wird ein Download-Popup-Fenster angezeigt, was eine sehr schlechte Benutzererfahrung darstellt

2: Einbetten

Embed und iframe fühlen sich ähnlich an. Sie sind gleichermaßen einfach und übersichtlich zu verwenden und der Effekt ist auch beim Öffnen des Internet Explorers gut, aber die Störungen durch Download-Popup-Fenster lassen sich nicht vermeiden.

 <embed src="http......" width="100%" height="400" />

3: pdf.js (der Effekt ist der beste)

Implementierungsschritte:

(1) Laden Sie die Datei pdf.js herunter

Da es viele pdf.js-Dateien gibt, müssen wir nur die Kerndateien verwenden, also extrahieren Sie die Kerndateien (domänenübergreifende Fehler wurden behandelt). Klicken Sie hier, um die Kerndatei herunterzuladen

(2) Importieren Sie Kerndateien in statische

(3) Nutzung

<Vorlage>
	<iframe: src="PfadURL" width="100%"></iframe>
</Vorlage>

<Skript>
Standard exportieren {
	Daten () {
	   zurückkehren {
	     PfadURL:''
	   }
	 },
	 montiert () {
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + encodeURIComponent('https://lidn02.o%BA.pdf') // Suche die viewe.html in der zuvor eingefügten PDF-Datei und + PDF-Adresse},
 }
</Skript>

(4) Der Effekt ist mit allen gängigen Browsern kompatibel.

(5) PDF als Stream empfangen

Obwohl der obige Effekt erzielt wurde, tritt beim Öffnen der Konsole immer noch eine Fehlerzeile auf:

Um dieses Problem zu lösen oder wenn ein domänenübergreifendes Problem auftritt, wird die PDF-Datei in Form eines Streams empfangen und dann angezeigt:

montiert(){
	this.getData(Ihre PDF-Adresse)
}

//Dateistream empfangen, Adresse konvertieren und dann getData(url) anzeigen{
  axios.get(url,{
    Antworttyp: „Blob“,
  })
    .then(res => {
      let blob = neuer Blob([res.data], {Typ: "Anwendung/vnd.ms-excel"})
      let objectUrl = URL.createObjectURL(blob)
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + objectUrl
    })
    .catch(err => {
      console.log(fehler)
    })
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Online-Vorschau von PDF-Dateien in Vue. Weitere relevante Vue-Online-Vorschauen von PDF-Dateien finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!