pdf文件在线预览，兼容多浏览器和手机端

最新推荐文章于 2024-06-05 01:32:57 发布

jianhaojiang

最新推荐文章于 2024-06-05 01:32:57 发布

阅读量2.2w

点赞数 6

本文链接：https://blog.csdn.net/qq_38584967/article/details/83784049

版权

前言

最近学习了一下网页在线预览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.com/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

最低0.47元/天解锁文章

jianhaojiang

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
19
评论
pdf文件在线预览，兼容多浏览器和手机端

前言最近学习了一下网页在线预览pdf文件的实现方式，主要有：PDFObject：使用起来非常方便，电脑端兼容性好，试过能兼容ie9,也很快，但在手机上一些浏览器无法在线.jquery.media.js：使用起来非常方便，不支持ie。ie的话可以提示安装插件实现预览点击下载。不支持手机端。而且要写代码判断ie浏览器以及是否已安装插件，可以百度，都有的。PDF.js：功能强大，使用起来代码相对...
复制链接

扫一扫

专栏目录