pdfh5.js移动端展示预览打开pdf文件

pdfh5.js移动端展示预览打开pdf文件

pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。

1. 注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。
2. svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案
3. canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf

使用示例：（两种方法）

一、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: "网络地址"
});

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

1. 安装

npm install pdfh5

2. 使用

<template>
  <div id="app">
    <div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
    data() {
      return {
        pdfh5: null
      };
    },
    mounted() {
        //实例化
      this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: "../../static/test.pdf"
      });
      //监听完成事件
      this.pdfh5.on("complete", function (status, msg, time) {
        console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
      })
    }
  }
</script>
<style>
    @import "pdfh5/css/pdfh5.css";
    *{
    padding: 0;
    margin: 0;
    }
    html,body,#app {
    width: 100%;
    height: 100%;
    }
</style>

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

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

转载文章：https://www.cnblogs.com/newcxd/p/13878302.html