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

VIP文章 Qiang1455155765

已于 2022-08-19 12:27:52 修改

阅读量4.6k

点赞数 1

分类专栏： js HTML5 vue 文章标签：前端 javascript vue.js

于 2022-08-19 11:43:53 首次发布

本文链接：https://blog.csdn.net/Qiang1455155765/article/details/126420957

版权

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

1、npm安装指令：npm i pdfh5

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

//封装组件
<template>
  <div class="pdfBox">
    <div id="previewPdf"></div>
  </div>
</template>
<script>
import pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css'
export default {
  name: 'pdfh5',
  data () {
    return {
      pdfh5: null
    }
  },
  methods: {
    openPdf(url){     //url：PDF文件地址
      this.pdfh5 = new pdfh5('#previewPdf', {
        pdfurl: url
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.pdfBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 99;
}
</style>

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