PC端与手机端h5页面pdf展示
我们web经常会遇到对于pdf文件的展示,对于PC端我们可以直接通过浏览器打开pdf进行预览。但是对于手机端,我们的h5页面中连接的pdf文件在安卓上会跳转到下载,在IOS上会直接打开。对于这种需要兼容pc端与手机端的展示我们可以使用pdf.js来做。
解决方案:
1,pdf.js
2,pdfh5.js
下面的pdfh5.js是对上面pdf.js的封装,pdf.js对于2.0.xx版本与2.1.xx版本的使用有些许区别。pdfh5.js的使用起来更加简单。
我这里是传统开发模式,没有使用npm进行安装。
pdfh5.js 使用
原pdfh5.js博客:https://www.gjtool.cn/archives/pdfh5
pdfh5.js 使用步骤:
1,引入css
<link rel="stylesheet" href="css/pdfh5.css" />
2,引入js
<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>
3,创建div
<div id="demo" ></div>
4,实例化
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
5,其他方法
// $.ajax({
// url: "页面崩溃PDF(1).pdf", //假设这是pdf文件流的请求接口
// type: "get",
// mimeType: 'text/plain; charset=x-user-defined', //jq ajax请求文件流的方式
// // dataType: 'arraybuffer',
// success: function(data) {
// pdfh5 = new Pdfh5('#demo', {
// data: data,
// });
// pdfh5.on("success", function(time) {
// time = time / 1000
// console.log("pdf渲染完成,总耗时" + time + "秒");
// //滚动到第3页
// // pdfh5.goto(3);
// this.download("2222",function(){
// console.log(11111)
// })
// })
// }
// });
// axios.get("https://www.gjtool