H5怎么实现在线预览PDF
导读:收集整理的这篇文章主要介绍了H5怎么实现在线预览PDF,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来H5怎么实现在线预览PDF,H5实现在线预览PDF的注意事项有哪些,下面就是实战案例,一起来看一下。简介PDF.js is...
收集整理的这篇文章主要介绍了H5怎么实现在线预览PDF,觉得挺不错的,现在分享给大家,也给大家做个参考。这次给大家带来H5怎么实现在线预览PDF,H5实现在线预览PDF的注意事项有哪些,下面就是实战案例,一起来看一下。简介
PDF.js is a Portable Document Format (PDF) viewer that is built wITh HTML5.
PDF.js is commUnity-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs.
开源地址:https://github.COM/mozilla/pdf.js
下载后不能直接使用,需要重新构建,不熟悉将会非常麻烦
构建好的程序包:build_jb51.rar
示例
引用文件,直接复制下文可以直接使用
!DOCTYPE html> html> head> meta http-equiv="Content-type" content="text/html; charset=utf-8"> title> 课程详情/title> style type="text/css"> /style> script src="~/Scripts/jquery-1.10.2.min.js"> /script> script src="~/Scripts/plugins/pdfjs/pdf.js"> /script> script src="~/Scripts/plugins/pdfjs/pdf.worker.js"> /script> script type="text/javascript"> VAR var_filepath = decodeURIcomponent("@filepath"); //不能跨域 var var_win_height = $(window).height(); $(document).ready(function () { resetplayerSize(); } ); $(window).resize(function () { resetplayerSize(); } ); function resetPlayerSize() { var_win_height = $(window).height(); $(".tmplayer").css({ "height": var_win_height + "px" } ); } /script> /head> body style="margin: 0; overflow: hidden"> p id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"> /p> script type="text/javascript"> $('.tmPlayer').html('iframe frameBorder="0" scrolling="no" src="/Scripts/plugins/pdfjs/generic/web/viewer.html?file=' + var_filepath + '" style="width:100%; height:100%; "> /iframe> '); /script> /body> /html>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
H5的Drag与Drop详解
在H5页面中怎样调用APP
以上就是H5怎么实现在线预览PDF的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: H5怎么实现在线预览PDF
本文地址: https://pptw.com/jishu/583971.html