vueh5移动端嵌入预览PDF文件，支持放大和分页并附完整代码。

要在移动端嵌入并预览PDF文件，最便捷的方式就是使用pdfh5插件，该插件成熟稳定。

1、npm安装指令：npm i pdfh5

 2、首先在vue项目components目录下创建PreviewpdfH5.vue文件，添加以下代码：

1.  
   //封装组件
2.  
   <template>
3.  
     <div class="pdfBox">
4.  
       <div id="previewPdf"></div>
5.  
     </div>
6.  
   </template>
7.  
   <script>
8.  
   import pdfh5 from 'pdfh5';
9.  
   import 'pdfh5/css/pdfh5.css'
10.  
    export default {
11.  
      name: 'pdfh5',
12.  
      data () {
13.  
        return {
14.  
          pdfh5: null
15.  
        }
16.  
      },
17.  
      methods: {
18.  
        openPdf(url){     //url：PDF文件地址
19.  
          this.pdfh5 = new pdfh5('#previewPdf', {
20.  
            pdfurl: url
21.  
          });
22.  
        }
23.  
      }
24.  
    }
25.  
    </script>
26.  
    <style lang="scss" scoped>
27.  
    .pdfBox {
28.  
      position: fixed;
29.  
      top: 0;
30.  
      left: 0;
31.  
      width: 100vw;
32.  
      height: 100vh;
33.  
      background: #000;
34.  
      overflow: hidden;
35.  
      z-index: 99;
36.  
    }
37.  
    </style>

3、在需要显示PDF文件的Home页面文件中引入子组件

import PreviewPdf from '../components/PreviewpdfH5.vue';

 4、注册子组件

1.  
   components: {
2.  
   PreviewPdf
3.  
   }

5、使用vue的ref将PDF文件传给子组件

this.$refs.previewPdfh5.openPdf('http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-01/18/75it6phpocqYFV1642488558220118.pdf')

 6、使用子组件并显示PDF

<preview-pdf ref="previewPdfh5"></preview-pdf>

完整代码：

1、子组件封装代码

1.  
   <template>
2.  
   <div class="pdfBox">
3.  
   <div id="previewPdf"></div>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   import pdfh5 from 'pdfh5';
8.  
   import 'pdfh5/css/pdfh5.css'
9.  
   export default {
10.  
    name: 'pdfh5',
11.  
    data () {
12.  
    return {
13.  
    pdfh5: null,
14.  
    }
15.  
    },
16.  
    methods: {
17.  
    openPdf(url){ //url：PDF文件地址
18.  
    this.pdfh5 = new pdfh5('#previewPdf', {
19.  
    pdfurl: url
20.  
    });
21.  
    this.pdfh5.on('success', ()=>{
22.  
    console.log('pdf渲染成功');
23.  
    });
24.  
    }
25.  
    }
26.  
    }
27.  
    </script>
28.  
    <style lang="scss" scoped>
29.  
    .pdfBox {
30.  
    position: relative;
31.  
    top: 0;
32.  
    left: 0;
33.  
    width: 100vw;
34.  
    height: 100vh;
35.  
    background: #000;
36.  
    overflow: hidden;
37.  
    z-index: 99;
38.  
    #previewPdf {
39.  
    height: 100vh;
40.  
    }
41.  
    }
42.  
    </style>

2、在页面中使用

1.  
   <template>
2.  
   <div class="home">
3.  
   <preview-pdf ref="previewPdfh5"></preview-pdf>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   import PreviewPdf from '../components/PreviewpdfH5.vue';
9.  
   export default {
10.  
    name: 'Home',
11.  
    components: {
12.  
    PreviewPdf
13.  
    },
14.  
    data () {
15.  
    return {
16.  
     
17.  
    }
18.  
    },
19.  
    mounted () {
20.  
    this.$refs.previewPdfh5.openPdf('http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-01/18/75it6phpocqYFV1642488558220118.pdf')；
21.  
    }
22.  
    }
23.  
    </script>

这篇好文章是转载于：学新通技术网