So zeigen Sie eine PDF-Datei mit pdfjs in vue in der Vorschau an

Vorwort

Beim Schreiben eines Projekts werden gelegentlich PDF-Dateien verwendet. Wenn wir PDF-Dateien anzeigen möchten, laden Sie die PDF-Datei zuerst herunter und zeigen Sie sie dann mit der auf dem Computer installierten Software an, die speziell zum Öffnen von PDFs gedacht ist? Was wäre, wenn Benutzer keine Software installieren dürfen? Schließlich gibt es immer noch viele Benutzer, die nicht wissen, wie man Software installiert oder was zum Öffnen erforderlich ist. Ok, wenn es eine solche Forderung gibt, dann müssen wir sie auch umsetzen. Wir können diesen Grund ja nicht widerlegen.

denken

Nachdem wir das Thema nun angesprochen haben, wollen wir darüber nachdenken, wie wir es nutzen können. Da Sie PDF verwenden müssen. Gibt es eine Bibliotheksdatei, die mit js bearbeitet werden kann und mir hilft? Durchsuchen Sie einfach Baidu und Sie werden unseren heutigen Protagonisten finden: pdfjs.

Analysieren und Herunterladen des Bibliotheksverzeichnisses

Jetzt, da wir einen Plan haben, wollen wir ihn studieren. Zuerst müssen wir die Datei dieser Bibliothek herunterladen. Download-Adresse: Klicken Sie hier, um sie herunterzuladen. Es wird zwei Versionen dieser Seite geben, eine ist mit der alten Version kompatibel und Sie können sie entsprechend Ihrer tatsächlichen Situation herunterladen.

Die heruntergeladene Codestruktur ist wie folgt:

Hier gibt es zwei Ordner:

• build Dies ist die PDF-Kerndatei
• Webbeispiel

Anwendung

Es gibt zwei Möglichkeiten, es zu verwenden. Eine besteht darin, die PDF-Vorschau selbst über die Kernbibliotheksdatei zu implementieren, und die andere besteht darin, die PDF-Dateien anhand der angegebenen Beispiele in der Vorschau anzuzeigen. Hier verwenden wir das angegebene Beispiel, um eine Vorschau der PDF-Datei anzuzeigen. Wenn Sie interessiert sind, können Sie nachlesen, wie Sie dies mithilfe der Kerndatei implementieren.

Dateispeicherort

Zuerst müssen wir die heruntergeladenen Dateien im statischen Verzeichnis des Vue-Projekts ablegen, wie unten gezeigt:

Tatsächlicher Anruf

Verwenden Sie die folgende Methode, um es bei Bedarf aufzurufen:

var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
Fenster.öffnen(Fenster.Standort.Herkunft + Fenster.Standort.Pfadname+'static/pdfjs/web/viewer.html?file='+URL)

Die obige PDF-Adresse ist der Pfad, den Sie lokal eingeben. Der Pfad kann hier relativ oder absolut sein. Oben ist ein absoluter Pfad.

Zu diesem Zeitpunkt können Sie den folgenden Effekt sehen:

Frage

Wenn die Adresse dieser PDF-Datei und die Adresse der aktuell heruntergeladenen Bibliotheksdatei in derselben Domäne liegen, sollte es keine großen Probleme geben. Wenn sie in unterschiedlichen Domänen liegen, müssen Sie das domänenübergreifende Problem lösen. Hier muss noch eine Sache gelöst werden, nämlich die Bibliotheksdatei, die wir heruntergeladen haben. Suchen Sie in der Datei viewer.js nach dem folgenden Inhaltskommentar:

Kommentieren Sie den Inhalt des roten Felds im obigen Bild. Wenn der Server eine Download-Adresse bereitstellt, können Sie das Problem durch die Verschachtelung von Iframes lösen.

Zusammenfassen

Tatsächlich können Sie sehen, dass domänenübergreifendes Wissen manchmal sehr nützlich ist. Es wird oben verwendet. Als ich anfing, daran zu arbeiten, konnte ich es nicht herausbekommen. Später stellte ich fest, dass ich es nicht domänenübergreifend herunterladen konnte. Derzeit gibt es noch weitere Verwendungszwecke und Fragen, die jeder gerne stellen kann.

Oben finden Sie Einzelheiten zur Verwendung von pdfjs in vue zur Vorschau von PDF-Dateien. Weitere Informationen zur Verwendung von pdfjs in vue zur Vorschau von PDF-Dateien finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!