在pc比较容易实现pdf在线浏览，但在H5手机移动端在线浏览pdf文件，同时支持手指缩放功能插件，这里推荐几个开源的pdf移动在线预览插件。
这里为网友推荐一下比较好用的在线浏览pdf插件。
一 pdfh5.js插件。支持js和vue模块化引入方式
演示：https://www.gjtool.cn/pdfh5/pdf.html
git地址：https://gitee.com/pjjg/pdfh5
效果：
script标签引入方式（需下载本项目文件夹css/pdfh5.css、js内所有文件）
<link rel="stylesheet" href="css/pdfh5.css" /> <div id="demo"></div> <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-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
实例化
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
npm安装方式（适应于vue）
npm install pdfh5
vue使用
<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>
API接口方法
注意： pdf路径地址用相对路径加载速度最快，网络地址比较慢，本地绝对路径地址不能加载。
注意： pdf路径地址用相对路径加载速度最快，网络地址比较慢，本地绝对路径地址不能加载。
注意： pdf路径地址用相对路径加载速度最快，网络地址比较慢，本地绝对路径地址不能加载。
实例化
pdfh5实例化的时候传两个参数，selector选择器，options配置项参数，options可以不填写，会自动获取浏览器地址栏？file=后面的地址。会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
var pdfh5 = new Pdfh5(selector, options);
参数名称
类型
取值
是否必须
作用
selector {String} - √ pdfh5的容器选择器
options {Object} - × pdfh5的配置项参数
options配置项参数列表
示例： 配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf",
lazy:true
});
二 TouchPDF
git:https://github.com/May1st/pdf-online-h5-in-IOS-ANDROID.git
公共的pdf页面可以自己写，调用插件的代码也相对简单：
seePDF.html
<!-- 头部导入，注意jquery版本 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="pdf.compatibility.js"></script> <script type="text/javascript" src="pdf.js"></script> <script type="text/javascript" src="jquery.touchSwipe.js"></script> <script type="text/javascript" src="jquery.panzoom.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <script type="text/javascript" src="jquery.touchPDF.js"></script> <link href="jquery.touchPDF.css" rel="stylesheet" media="screen" /> <!-- body中放个div --> <div id="myPDF" style="height: 95%; width: 95%; margin: auto;"></div>
seePDF.js
$(function() {
//文件服务器的路径
var picDownloadServerUrl = window && window.weapon ? window.weapon.picDownloadServer : ''，
//url中传递的pdf文件路径
pdfURL = Utils.getParamFromUrl('pdfURL')，
//pdf浏览路径
s = picDownloadServerUrl + pdfURL;
//开始使用TouchPDF插件
$("#myPDF").pdf( {
title: '',
source: s,
loadingWitdh: loadingWitdh,
loadingHeight: loadingHeight
} );
alert('可左右滑动翻页');
})
项目中自己做了个简单的公共插件modal，是一个可以展示图片或者pdf的弹窗，pdf则使用iframe动态将自己的seePDF页面路径插入src。此处要注意src的路径以防出现跨域问题，可以使用一下代码对iframe中的pdf路径进行预测试：
Utils.js
var Utils = {
//展示文件类的页面
showFilePage: function(fileName) {
if (fileName.indexOf('.pdf') > -1) {
var s = window.location.host + '/test/pdf/pdfURL=' + fileName;
if (!s.indexOf('http') > -1) {
s = 'http://' + s;
}
Utils.tetPage(s).then(function(){
window.location.href = s;
},
function(){
Utils.errorPage('文件不存在，请联系后台管理员！');
});
}
}
//预测试文件类页面
tetPage: function(url) {
return $.ajax({
type: "GET",
cache: false,
url: url,
data: "",
success: function() {
console.log('1')
},
error: function() {
console.log('2')
}
});
}
}
某个业务模块的pdf展示页面:
newDetails.js
Utils.showFilePage(pdfName);
