vue-pdf realisiert Online-Dateivorschau

<Vorlage>
 <div Klasse="pdf-box">
 //pdf-Anzeige<pdf
          Klasse="pdf"
          :page="Seitennummer"
          :src="pdfFormular.url"
          @progress="geladenesVerhältnis = $Ereignis"
          @num-pages="Seitengesamtzahl = $event"
        ></pdf>
        //Seitennummernumschaltung <div class="page-box">
          <el-button-gruppe>
            <el-Schaltfläche
              Typ="primär"
              Symbol="el-icon-arrow-left"
              Größe="mini"
              @click="vorSeite"
              >Vorherige Seite</el-button
            >
            <el-button Typ="primär" Größe="mini" @click="nächsteSeite"
              >Nächste Seite<i class="el-icon-arrow-right el-icon--right"></i
            ></el-Schaltfläche>
          </el-button-group>
          //Seitenzahlanzeige <div style=" color: #409EFF; display: flex; justify-content: flex-end;">
            {{ Seitennummer }} / {{ Seitengesamtnummer }}
          </div>
        </div>
      </div>
</Vorlage>

<Skript>
PDF aus „vue-pdf“ importieren
Standard exportieren {
  Name: "pdf",
  Komponenten: { pdf },
  Daten () {
   pdfFormular: { url: '' },
      // PDF anzeigen
      URL:'',
      Seitennummer: 1,
      pageTotalNum: 1, // Gesamtzahl der geladenen Seiten. Ratio: 0 // Ladefortschritt der aktuellen Seite, der Bereich liegt zwischen 0 und 1. Wenn er 1 ist, bedeutet dies, dass die aktuelle Seite vollständig geladen wurde.},
  Verfahren:{
 //Vorherige Seite prePage () {
      let page = diese.Seitennummer
      Seite = Seite > 1? Seite - 1 : this.pageTotalNum
      this.pageNum = Seite
    },

    // Nächste Seite nextPage () {
      let page = diese.Seitennummer
      Seite = Seite < this.pageTotalNum ? Seite + 1 : 1
      this.pageNum = Seite
    },
  }
 }
</Skript>