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

npm install --save vue-pdf

<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>

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

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

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

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)

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