admin管理员组文章数量:1545257
前言
最近学习了一下网页在线预览pdf文件的实现方式,主要有:
PDFObject:使用起来非常方便,电脑端兼容性好,试过能兼容ie9,也很快,但在手机上一些浏览器无法在线.
jquery.media.js:使用起来非常方便,不支持ie。ie的话可以提示安装插件实现预览点击下载。不支持手机端。而且要写代码判断ie浏览器以及是否已安装插件,jquery.media.js实现预览不做讲解,有需要可以参考:
jquery.media.js 插件实现在线预览PDF文件。
PDF.js:功能强大,使用起来代码相对繁琐一点,能够支持电脑端和手机端,要实现和另外两个一样的效果比较繁杂,本博客只讲简单的使用,如果PDFObject不行就用PDF.js吧。
…
结论:网页判断当前是PC端还是其他终端,用PDFObject实现PC端、PDF.js实现其他终端(除了电脑端都用pdf.js实现)。
本博客只有实现,原理请自行搜索学习,附上参考的博客:
前端预览PDF:PDFObject、PDF.js
在线查看PDF文件,pdf.js使用方法
PDF.js官方例子
正文
PDFObject实现
PDFObject实现非常简单
js下载地址:https://github/pipwerks/PDFObject/
1.引入js文件
<script type="text/javascript" src='pdfobject.min.js'></script>
我引入的是pdfobject.min.js。引入pdfobject.js和pdfobject.min.js其中一个就可以。
官方提供了PDFObject.supportsPDFs用于判断当前能否使用PDFObject:
if(PDFObject.supportsPDFs){
console.log("PDFObject可以使用,Yes!");
} else {
alert("当前不支持PDFObject,抱歉!");
}
2.指定位置显示pdf文件
通过id嵌入。
<body>
<div id="pdf_viewer"></div>
</body>
3.通过脚本显示
<script type="text/javascript">
if(PDFObject.supportsPDFs){
// PDF嵌入到网页指定id
PDFObject.embed("/mypdf/test.pdf", "#pdf_viewer" );
} else {
alert("当前不支持哦!返回首页");
location.href = "/";
}
</script>
值得注意的是,PDFObject.js的embed方法参数不支持包含中文的字符串,如果路径包含中文则不能正确的找到我们的pdf文件。所以需要手动编码,可以类似以下处理:
//不支持中文,谷歌浏览器能运行,ie浏览器下embed方法则不能正确的找到pdf文件。
var pdfurl = "/我.pdf";
PDFObject.embed(pdfurl, "#pdf_viewer" );
//-----------------分割线-------------------
//乾坤大法
var pdfurl = encodeURI("/我.pdf");
PDFObject.embed(pdfurl, "#pdf_viewer" );
完整例子
<!DOCTYPE html>
<html>
<head>
<title>Show PDF</title>
<meta charset="utf-8" />
<script type="text/javascript" src='pdfobject.min.js'></script>
<style type="text/css">
html,body,#pdf_viewer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="pdf_viewer"></div>
&l
版权声明:本文标题:pdf文件在线预览,兼容多浏览器和手机端 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727159238a1099754.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论