VUE----移动端在线预览pdf 可上下滚动，大小缩放（pdfh5）

VUE----移动端在线预览pdf 可上下滚动，大小缩放（pdfh5）

1.安装需要的工具包

npm i --save pdfh5

2.写入组件

<template>
  <div :class="$style.pdf" v-show="visible">
    <div @click="visible = false" :class="$style.iconContain">
      <span :class="$style.iconClose" class="xiaoicon">&#xe759;</span>
    </div>
    <div id="preViewPdf"></div>
  </div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
export default {
  name: "pdfH5",
  data() {
    return {
      visible: false,
      pdfh5: null,
    };
  },
  methods: {
    openPdf(url) {
      this.visible = true;
      //实例化
      this.pdfh5 = new Pdfh5("#preViewPdf", {
        pdfurl: url,
      });
    },
  },
};
</script>
 
<style scoped module>
* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.pdf {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 200;
}
.iconContain {
  position: fixed;
  top: 0.426667rem;
  right: 0.426667rem;
  width: 0.64rem;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  border-radius: 50%;
}
.iconClose {
  display: block;
  color: #fff;
}
</style>

3.pdf展示页面添加组件

<template>
  <PreviewpdfH5 ref="PreviewpdfH5"></PreviewpdfH5>
</template>

<script>
import PreviewpdfH5 from "../components/Pdf.vue";
export default {
  name: "Reportdet",
  components: { PreviewpdfH5 },
  data() {
    return {
      pdfSrc: "", // pdf文件地址this.$route.query.url
      id: "", //报告id
    };
  },
  mounted() {
    this.pdfSrc = this.$route.params.url || ""; //获取pdf路径
    this.id = this.$route.params.id || "";
    this.$refs.PreviewpdfH5.openPdf(this.pdfSrc);
    this.changeType(this.id);
  },
  methods: {
    // 判断报告是否已读
    changeType(id) {
      this.$axios
        .get(this.$myStore.urlLink + "changeType", {
          params: {
            id: id,
          },
        })
        .then((res) => {});
    },
  },
};
</script>

<style scoped>
</style>

参考链接：https://blog.csdn.net/baidu_39067385/article/details/117876306