Vue-pdf implementiert eine Online-Vorschau von PDF-Dateien

Vorwort

In den meisten Projekten werden Sie auf eine Online-Vorschau von PDF-Dateien stoßen. Das Projekt verwendet Element UI und wird mit vue-pdf implementiert.

Abhängigkeiten installieren

npm install --save vue-pdf

erreichen

<Vorlage>
    <div>
        <el-Zeile>
            <el-button @click="onPreview" size="small">Vorschau</el-button>
        </el-row>
        <el-dialog title="Vertragsanhang Vorschau anzeigen" :visible.sync="viewVisible" center width="60%" @close='closePreview'>
            <el-row :gutter="20">
                <span>Insgesamt {{pageCount}} Seiten, aktuelle Seite {{pdfPage}}</span>
                <el-button type="text" size="mini" @click.stop="previousPage">Vorherige Seite</el-button>
                <el-button type="text" size="mini" @click.stop="nextPage">Nächste Seite</el-button>
            </el-row>
            <div>
                <pdf :src="src" :page="pdfPage" @num-pages="Seitenanzahl = $event" @page-loaded="pdfPage = $event" style="Anzeige: Inline-Block; Breite: 100 %"></pdf>
            </div>
        </el-dialog>
    </div>
</Vorlage>
<Skript>
PDF aus „vue-pdf“ importieren
Store aus '@/store/' importieren
Standard exportieren {
    Komponenten: {
        pdf
    },
    Daten(){
        zurückkehren {
            viewVisible: false,
            quelle: null,
            pdfSeite: 1,
            Seitenanzahl: 0,
            Token: store.getters.access_token,
        }
    },
    Methoden:{
        beiVorschau(){
            diese.src = pdf.createLoadingTask({
                URL: „http://localhost:8082/file/demo.pdf“,
                httpHeaders: {Authorization:'Bearer '+ dieses.token}
            });
            dies.src.promise.then(pdf => {
                Dies.viewVisible = true;
            });
        },
        Vorschau schließen(){
            diese.pdfSeite = 1;
        },
        vorherigeSeite(){
            let p = diese.pdfSeite
            p = p > 1 ? p-1 : diese.Seitenanzahl
            diese.pdfSeite = p
        },
        nächsteSeite(){
            let p = diese.pdfSeite
            p = p < diese.Seitenanzahl ? p+1 : 1
            diese.pdfSeite = p
        }
    }
}
</Skript>

Wirkung

Notiz

1. URL

URL ist der Dateiadressenpfad

diese.src = pdf.createLoadingTask({
    URL: „http://localhost:8082/file/demo.pdf“,
});

2. Setzen Sie den Anforderungsheader

Sie können Parameter wie Token über httpHeaders festlegen

httpHeaders: {Authorization:'Bearer '+ dieses.token}

3. Quelle

Das ist wichtiger. Viele Beiträge im Internet lauten wie dieser.

dies.src.then(pdf => {
    Dies.viewVisible = true;
})

Meldet TypeError: this.src.then ist keine Funktion

TypeError: this.src.then ist keine Funktion
    bei VueComponent.onPreview (index.vue?6ced:241)
    beim Klicken (index.vue?aaff:261)
    bei invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    bei VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    bei invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    bei VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    bei VueComponent.handleClick (element-ui.common.js?5c96:9413)
    bei invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    bei HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    bei HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

Die richtige Antwort ist diese

dies.src.promise.then(pdf => {
    Dies.viewVisible = true;
});

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue implementiert Online-Vorschau von PDF-Dateien und Download (pdf.js)
Vue implementiert die Online-Vorschaufunktion von PDF-Dokumenten
Vue-Plugin-Entwicklung: So verwenden Sie pdf.js, um eine Online-Vorschau von PDF-Dokumenten auf Mobiltelefonen zu realisieren
Vue-Beispielcode für die Online-Vorschau von Office-Dateien
Vue implementiert eine Online-Vorschau von PDF-Dateien (mithilfe von pdf.js/iframe/embed)
vue Beispielcode zur Verwendung von vue-pdf zur Implementierung einer PDF-Onlinevorschau
vue-pdf realisiert Online-Dateivorschau
Online-Vorschau von drei gängigen Dateitypen in Vue-Projekten (PDF-/Word-/Excel-Tabellen)

<<: So lesen Sie die regionalen Informationen einer IP mithilfe des Nginx- und GeoIP-Moduls

>>: MySQL Community Server 5.6 Installations- und Konfigurations-Tutorial unter Windows 8