本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来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
示例
引用文件,直接复制下文可以直接使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
阅读剩余部分
相关阅读 >>
通过HTML5 实现图片上传与预览功能
HTML5 中浏览器是否能播放指定的音频/视频类型的方法canplaytype()
HTML5 用什么工具开发
分享一款HTML5 小游戏绵羊快跑
HTML5 获取当前地理位置并在百度地图上展示的实例
html中的title是什么意思?
什么是应用程序缓存(application cache)?
如何用HTML5 在页面中插入可自动播放的视频
HTML5 中canvas画线有毛边如何解决
HTML5 返回音频/视频的当前网络状态(activity)的属性networkstate
更多相关阅读请进入《HTML5 》频道 >>
¥83.86元 人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5怎么实现在线预览PDF