vue移動端預覽pdf

vue-pdf移動端缺點：

1、安卓預覽紅頭文件會出現缺字少字的問題，ios正常

2、預覽過大文件，分頁形式的好用，不分頁的文件過大可能打不開

3、分頁形式放大縮小只能通過按鈕改變css放大，不分頁無法放大

解決vue-pdf移動端問題使用pdfh5預覽pfd：

• 1.安裝

npm install pdfh5

• 2.使用

<template>
  <div id="app">
    <div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
    data() {
      return {
        pdfh5: null
      };
    },
    mounted() {
        //實例化
      this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
      });
      //監聽完成事件
      this.pdfh5.on("complete", function (status, msg, time) {
        console.log("狀態：" + status + "，信息：" + msg + "，耗時：" + time + "毫秒，總頁數：" + this.totalNum)
      })
    }
  }
</script>

<style>
    @import "pdfh5/css/pdfh5.css";
    *{
    padding: 0;
    margin: 0;
    }
    html,body,#app {
    width: 100%;
    height: 100%;
    }
</style>

 

• 注意：如果css引用報錯的話，按下面的方式引用。

 

import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

 

 

異常問題匯總：

1、移動端設置meta ,否則影響展示 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 詳情配置查看：https://gitee.com/pjjg/pdfh5