The use of pdfh5.js and the pits encountered

The use of pdfh5.js and the pits encountered

Address of pdfh5: https://www.npmjs.com/package/pdfh5

1. Introduce pdfh5 in the project

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

The event name of the completion event on function

Encountered pit

1. The pit of introducing css
   When importing css files, the official gives two methods
   . The first method is to use @import 'pdfh5/css/pdfh5.css' in the style tag. This method may report an error.
   The second method is: It is recommended to use this method by importing 'pdfh5/css/pdfh5.css' in the script tag
2. Regarding the switching problem of large file loading
   When the pdf file is too large and has many pages, the pdf will be loaded slowly when it is
   opened
   
   . Every time you reopen the pdf, perform the destroy operation

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

3. In the scene that needs to be switched, there will be a situation of clicking blank.
For example: 'I have read and agreed to the xxx agreement, xx agreement', click on an agreement, and a pdf will pop up

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

These are the basic usage, other detailed api, you can go to the official website to view, the address is on the second line at the top