So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue

Wenn wir auf der Seite eine PDF-Vorschau anzeigen, können einige Dateien nicht gedruckt oder heruntergeladen werden. Derzeit ist es schwierig, die Kundenanforderungen mithilfe des mit Windows gelieferten PDF zu erfüllen. Daher benötigen wir eine andere Möglichkeit, die PDF-Dateivorschau unter besonderen Bedingungen zu unterstützen. Hier verwende ich die Form der Einführung der pdf.js-Datei, um diesen Zweck zu erreichen.

Schritt 1: pdf.js herunterladen

Importieren Sie die Datei pdf.js

Die Adresse lautet: http://mozilla.github.io/pdf.js/getting_started/

Der zweite Schritt ist die Einführung von Vue

Ich habe die heruntergeladenen Dateien im Stammverzeichnis von piblic abgelegt.

Schritt 3: Verwenden

Die Hauptadresse lautet "/build/generic/web/viewer.html?file="+href, wobei href der vom Anforderungs-Backend zurückgegebene Dateipfad oder der nach der Front-End-Analyse des vom Backend zurückgegebenen Dateistreams generierte Dateipfad ist. /build/generic/web/viewer.html?file= wird vorne hinzugefügt. Die Adresse ist der Pfad der von Ihnen eingegebenen pdf.js-Datei. Sie können auch direkt /build/generic/web/viewer.html schreiben und es wird direkt danach gesucht. Im Folgenden verwende ich den Front-End-Parsing-Dateistream, um die Adressvorschau zu generieren.

Vorschaumethode window.open("/build/generic/web/viewer.html?file="+href);

axios({
                Methode: 'get',
                URL:URL,
                Überschriften: {
                    "Token": Authentifizierung,
                },
                Antworttyp: "Blob",
            }).dann(Antwort => {
                Typ_ = Typ_.toLowerCase();
                wenn (Typ_ == "docx") {
                    that._type_ = "Anwendung/vnd.openxmlformats-officedocument.wordprocessingml.document"
                } sonst wenn (Typ_ == "doc") {
                    that._type_ = "Anwendung/msword"
                } sonst wenn (Typ_ == "gif") {
                    that._type_ = "Bild/GIF"
                } sonst wenn (Typ_ == "jpeg" || Typ_ == "jpg") {
                    that._type_ = "Bild/JPEG"
                } sonst wenn (Typ_ == "png") {
                    that._type_ = "Bild/png"
                } sonst wenn (Typ_ == "pdf") {
                    that._type_ = "Anwendung/pdf"
                } sonst wenn (Typ_ == "txt") {
                    that._type_ = "text/plain;charset=utf-8'"
                } sonst wenn (Typ_ == "xls") {
                    that._type_ = "Anwendung/vnd.ms-excel" 
                } sonst wenn (Typ_ == "xlsx") {
                    that._type_ = "Anwendung/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                }sonst wenn (Typ_ == "zip") {
                    that._type_ = "Anwendung/Zip"
                } sonst wenn (Typ_ == "ppt") {
                    that._type_ = "Anwendung/vnd.ms-Powerpoint"
                } sonst wenn (Typ_ == "pptx") {
                    that._type_ = "Anwendung/vnd.openxmlformats-officedocument.presentationml.presentation"
                }
               wenn(Typ_ == "pdf"){
                    var blob = neuer Blob([Antwort.Daten], { Typ: dieser._Typ_ })
                    var href = window.URL.createObjectURL(blob); //Download-Link erstellen window.open("/build/generic/web/viewer.html?file="+href);
                }
            })

endlich

Wenn Sie das Herunterladen, Drucken und andere Funktionen von PDF-Dateien deaktivieren möchten, suchen Sie am einfachsten in der importierten Datei nach viewer.html. Der Pfad lautet viewer.html im Webordner unter dem allgemeinen Ordner unter build, wie folgt:

Suchen Sie in diesem HTML nach dem entsprechenden heruntergeladenen DOM und setzen Sie einfach display:none. Denken Sie daran, es nicht auszukommentieren, sonst wird ein Fehler gemeldet. Wie unten gezeigt, ist in der roten Box eines zum Herunterladen und das andere zum Drucken. Blenden Sie sie einfach aus.

Wenn jemand fragt, ob dies auch unsicher ist, können Sie mit dem Kunden besprechen, es nicht auf der Seite anzuzeigen, da alles, was auf der Seite zu sehen ist, auch durch Screenshots erfasst werden kann, was zwangsläufig unsicher ist.

Dies ist das Ende dieses Artikels über die Verwendung von pdf.js in Vue zur PDF-Vorschau. Weitere Informationen zur Verwendung von pdf.js in Vue zur PDF-Vorschau finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!