Die Verwendung von pdfh5.js und die aufgetretenen Fehler

Die Verwendung von pdfh5.js und die aufgetretenen Fehler

Adresse von pdfh5: https://www.npmjs.com/package/pdfh5

1. Führen Sie pdfh5 in das Projekt ein

 // 通过npm在项目中引入
 
  npm install pdfh5
  import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";
  
   // 注意：css样式也在script标签里通过import引入
   
// 使用

// 1.创建一个div
<div id='pdf'></div>

// 2.实例化
this.pdfh5 = new Pdfh5('#pdf',{
    
    
    // pdfurl和data二选一
	pdfurl:'pdf的路径'，
	data:pdf文件流 // array，如果是base64编码，需要先使用atob()转为二进制字符串
	})
	
// 3.监听完成事件
this.pdfh5.on('事件名',function())

Der Ereignisname des Abschlussereignisses für die Funktion

Auf die Grube gestoßen

1. Die Grube der Einführung von CSS
   Beim Importieren von CSS-Dateien gibt der Beamte zwei Methoden an
   . Die erste Methode besteht darin, @import 'pdfh5/css/pdfh5.css' im Style-Tag zu verwenden. Diese Methode meldet möglicherweise einen Fehler.
   Die zweite Methode ist: Es wird empfohlen, diese Methode zu verwenden, indem Sie „pdfh5/css/pdfh5.css“ in das Skript-Tag importieren
2. Über Probleme beim Laden und Wechseln großer Dateien.
   Wenn die PDF-Datei zu groß ist und viele Seiten hat, wird das PDF beim Öffnen langsam geladen.
   Wenn der Ladevorgang nicht abgeschlossen ist, klicken Sie erneut auf ein anderes PDF, und der PDF-Stil wird gestört
   
   . Führen Sie jedes Mal, wenn Sie das PDF erneut öffnen, den Zerstörungsvorgang durch

if (this.pdfh5) {
    
    
        this.pdfh5.destroy()
        this.pdfh5 = null
      }

3. In der Szene, die umgeschaltet werden muss, kommt es vor, dass Sie auf „Leer“ klicken.
Beispiel: „Ich habe die xxx-Vereinbarung gelesen und bin damit einverstanden, xx-Vereinbarung“, klicken Sie auf eine Vereinbarung und ein PDF wird angezeigt

// 在创建div的时候，id需要随之切换，如果id固定不变就会导致点击其他的出现空白情况

// html，容器通过v-if就行切换
<div class="content" id="medical-zygz_b" v-if="code === 'zygz_b'"></div>
<div class="content" id="medical-lpxz_b" v-if="code === 'lpxz_b'"></div>
// 或者动态绑定id的值
<div class="content" :id="'medical-'+code" v-if="code === 'lpxz_b'"></div>


// js
this.pdfh5 = new Pdfh5(`#medical-${
      
      this.code}`, {
    
    
    pdfurl: url,
})

Dies sind die grundlegende Verwendung und andere detaillierte APIs. Sie können sie auf der offiziellen Website anzeigen. Die Adresse befindet sich in der zweiten Zeile oben