Vue在线预览PDF（移动端）

使用pdfh5⭐⭐⭐⭐⭐

1. 安装：
   npm install pdfh5

   npm install canvas@2.11.2
   npm install dommatrix@1.0.3
   npm install web-streams-polyfill@3.2.1
   

   最新版本1.4.7引入需要额外安装一些依赖包，否则运行时可能会报错

2. 使用

   <template>
     <div id="demo"></div>
   </template>
   <script>
   import Pdfh5 from "pdfh5";
   import "pdfh5/css/pdfh5.css";
   export default {
     data() {
       return {
         pdfh5: null,
       };
     },
     mounted() {
       this.pdfh5 = new Pdfh5("#demo", {
         pdfurl: "可以是本地文件路径、http地址、接口请求返回的文件流",
         // responseType: "blob" // blob arraybuffer
       });
       //监听完成事件
       this.pdfh5.on("complete", function (status, msg, time) {
         console.log(
           "状态：" +
             status +
             "，信息：" +
             msg +
             "，耗时：" +
             time +
             "毫秒，总页数：" +
             this.totalNum
         );
         //禁止手势缩放
         this.pdfh5.zoomEnable(false);
       });
     },
   };
   </script>
   

   pdf文件流或者buffer已经得到:

    new Pdfh5('#demo', {
       data: blob,  //blob arraybuffer
    });
   

3. 文档地址:pdfh5

使用vue-pdf-app⭐⭐⭐⭐

1. 安装(我安装的版本是2.1.0)

   npm install vue-pdf-app
   npm install vue-pdf-app@2.1.0 //安装指定版本
   

2. 使用

   <template>
     <div>
       <VuePdfApp
         :pdf="url"
         :config="config"
         @pages-rendered="pagesRendered"
       ></VuePdfApp>
     </div>
   </template>
   <script>
   import VuePdfApp from "vue-pdf-app";
   export default {
     data() {
       return {
         url: null,
         config: {
           toolbar: false,
         },
       };
     },
     components: {
       VuePdfApp,
     },
     methods: {
       pagesRendered(v) {
         console.log(v);
       },
     },
   };
   </script>
   

3. 文档地址：vue-pdf-app

使用vue-pdf-embed⭐⭐⭐

移动端大文件滑动查看过快会存在自动刷新页面问题

1. 安装
   npm install vue-pdf-embed
2. 使用

   <template>
     <div>
       <div class="loading-wrap" v-if="!loaded">
         <van-loading type="spinner" size="24px" />
       </div>
       <vue-pdf-embed
         :image-resources-path="annotationIconsPath"
         :source="source1"
         @loaded="loadFinish"
       />
     </div>
   </template>
   <script>
   import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed";
   import { Loading } from 'vant';
   export default {
     data() {
         source1:'/test.pdf',
         loaded:false
     },
     components: {
         VuePdfEmbed,
         'van-loading':Loading
       },
       methods: {
         loadFinish() {
           console.log('load finish');
           this.loaded=true
         }
       },
   }
   </script>
   <style lang="less">
   .vue-pdf-embed {
     margin: auto;
     max-width: 480px;
   
     & > div {
       margin-bottom: 4px;
       box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
     }
   }
   .loading-wrap {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: rgba(255, 255, 255, 0.8);
   }
   </style>
   

3. 文档地址：vue-pdf-embed