pdfh5.js の使用と遭遇した落とし穴

pdfh5.js の使用と遭遇した落とし穴

pdfh5のアドレス：https://www.npmjs.com/package/pdfh5

1. プロジェクトに pdfh5 を導入する

 // 通过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())

関数の完了イベントのイベント名

遭遇した穴

1. css 導入の落とし穴
   css ファイルをインポートするとき、公式は 2 つの方法を提供しています
   。最初の方法は、スタイルタグで @import 'pdfh5/css/pdfh5.css' を使用することです。この方法はエラーを報告する可能性があります。2 番目の方法は次のとおりです
   。 scriptタグに「pdfh5/css/pdfh5.css」をインポートしてこの方法を使用することをお勧めします。
2. 大きなファイルの読み込みと切り替えの問題について
   pdf ファイルが大きすぎてページ数が多い場合、pdf を開くときに読み込みが遅くなり、
   読み込みが完了しない場合は、別の pdf をもう一度クリックすると、pdf のスタイルが乱れます
   
   。 PDF を再度開くたびに、破棄操作を実行します。

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

3. 切り替える必要があるシーンでは、空白をクリックする状況が発生します (
例: 「私は、xxx 契約、xx 契約を読み、同意しました」) で、契約をクリックすると、PDF がポップアップ表示されます。

// 在创建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,
})

基本的な使い方、その他詳細なAPIは公式サイトにアクセスしてご覧ください。アドレスは先頭2行目にあります