H5加載pdf使用 pdf-pdfh5.js

參考文檔

git項目地址

 

 

pdfh5.js 基於pdf.js和jQuery，web/h5/移動端PDF預覽手勢縮放插件。

• 注意：本地絕對路徑地址不能加載，跨域問題用代理或者服務端解決。

• svg模式渲染存在缺陷，只能渲染普通pdf，帶簽名、印章的可能會渲染不全，報錯，pdf.js官方目前沒有給出解決方案

• canvas模式本質是圖片，默認進去的時候，圖片在手機端被縮放，不是原分辨率，所以失真模糊。所以需要放大查看pdf

 

使用示例：

HTML（使用中）

一、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";

 

 

異常問題匯總：

1、移動端設置meta ,否則影響展示 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 

2、協議不一致（https、http）,導致報錯

 

 

 

3、跨域異常

 

 

 

https://github.com/mozilla/pdf.js  作為請求資源，受到外層瀏覽器局限，允許該資源在當前域名下使用，此時設置跨域請求，需要配置跨域請求，

如果：1、pdf地址在服務，需要服務器配置，該pdf請求地址 允許在該域名下訪問

           2、在OSS 需要配置，請求域名為*   所有域名都可以請求；

 

 

Response Headers

   access-control-allow-origin: *