vue3.0下使用pdf预览 ---- pdfh5.js

pdfh5在线预览 （建议使用谷歌浏览器F12手机模式打开预览）

原文参考：https://github.com/gjTool/pdfh5

快速使用（有两种方式）

一、script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）

• 1.引入css

 <link rel="stylesheet" href="css/pdfh5.css" />

• 2.创建div

 <div id="demo"></div>

• 3.依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）

 <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>

• 4.实例化

var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf"
});

二、npm安装方式（适应于vue）, react使用方法类似vue（example/react-test是react使用示例）

• 1.安装

 npm install pdfh5

• 2.使用（Vue3.0版本使用）— 在component文件下创建组件 — BasePdfView.vue

<!-- BasePdfView.vue -->
 <template>
  <div id="pdf-view">
    <div id="pdf"></div>
  </div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRoute } from "vue-router";
export default {
  name: "PdfView",
  setup() {
    const route = useRoute();
    const state = reactive({
      pdfh5: null
    });
    onMounted(() => {
      state.pdfh5 = new Pdfh5("#pdf", {
        pdfurl: route.query.url
      });
      state.pdfh5.on("complete", function (status, msg, time) {
        console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum);
      });
    });
    return {
      ...toRefs(state)
    };
  }
};
</script>

<style lang="less" scoped>
#pdf-view {
  height: 100%;
  #pdf {
    height: 100%;
  }
  /deep/ .pdfViewer {
    padding: 0;
  }
}
</style>

注意：如果css引用报错的话，按下面的方式引用。

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

• 3.在需要用到的组件 — 比如登录组件 (login.vue)

<template>
       <span class="protocol" v-for="item in loginUserPro" :key="item.title" @click="handleToPdf(item)">
        <span>{{ item.title }}</span>
      </span>
</template>


export default {
  	setup() {
  	const state = reactive({
  	//用户协议
	loginUserPro: [
        {
          title: "《隐私政策》",
          url: "/heye-h5/static/pdf/荷叶健康-隐私政策.pdf"
        },
        {
          title: "《用户服务协议》",
          url: "/heye-h5/static/pdf/荷叶健康-用户服务协议.pdf"
        }
      ],
	}),
	const handleToPdf = (item) => {
      let url = location.origin + item.url;
      router.push({
        path: "/pdfView",
        query: {
          url: url
        }
      });
    return {
      ...toRefs(state),
      handleToPdf
    };
  }