PDF 与 IE 的战斗！在线显示PDF内容

周大胖子 · 发表于 2018-7-10 17:13:54

本帖最后由周大胖子于 2018-7-10 17:16 编辑

等会儿！我先说一句！！！
让我死吧！！！！微软我爱你咱俩一起死吧！！！！！！！！！

开始：
前景提要：要用IE在线展示 pdf文件。版本要求 9+
我在度娘上一层一层的找代码，发现几个版本；
1. 第一种：直接 html代码搞定！【不兼容IE】，为懒鬼准备我放下代码：（参考网址：https://www.cnblogs.com/xgyy/p/6119459.html ）不要IE就这个不错

<embed src="http://localhost/180709/zkzkzk.pdf"
id="review" style="width:800px; height:750px; margin-top:45px;margin-left:500px" >
</embed>

复制代码

   2. 第二种：在第一种的基础上  到IE时候弹个窗让他下载插件！【或许该说是第一种的补充吧不过玛德我踩了这个坑】；

   3. 重点！划重点！第三种！！注意支持IE9 及以上版本。
    pdfobject.js  + pdf.js    我先解释一下：                            pdfobject.js---------- 判断浏览器是否支持在线显示 pdf ;
pdf.js-------渲染pdf
   使用步骤：
            1. 下载  这两个不是一个东西，所以得去两个地方下有条件的可以百度。没条件的—— 没条件管我啥事？反正我写个自己看的！
                        我把两个合一块了，下载地址: http://gis.dengmichong.top/images/在线演示pdf.zip
         2. 使用  来把演示文件：index.html 里的代码复制粘贴出来就可以 .不过配合iframe的封装我还没做。贴一下吧：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<style>
.pdfobject-container {
width: 100%;
height:580px;
}
.pdfobject { border: solid 1px #666; }
</style>
</head>
<body>
<div id="pdf"></div>
<script src="./web/pdfobject.min.js"></script>
<script>
var options = {
pdfOpenParams: {
navpanes: 0,
toolbar: 0,
statusbar: 0,
view: "FitV",
pagemode: "thumbs",
page: 2
},
forcePDFJS: true,
PDFJS_URL: "./web/viewer.html"
};
// 在底下的位置修改 pdf 的路径记得加上PDF
var myPDF = PDFObject.embed("http://localhost/180709/zkzkzk.pdf", "#pdf", options);
var el = document.querySelector("#results");
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1394306-6', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

复制代码

注意：网上说文件一定要放到 web 文件夹里！但是实际情况却不是这样的。不过要是相对目录的话就得以WEB 目录为根而不是以index.html 为根了。

周大胖子 · 发表于 2018-7-10 23:37:49

本帖最后由周大胖子于 2018-7-10 23:56 编辑

在这里封装之前。我做点小调整
参考文献：  https://blog.csdn.net/atluckstar/article/details/77688972
需要明确： 1，我是在展示页面内嵌iframe  然后通过点击按钮改变链接达到展示不同 pdf 的目的
               2. 达到目的的手段有两种区别在于内嵌的页是谁。
                     2.1 第一种内嵌到 viewer 页面改变参数 file  例如：  http://localhost/h5/pdf/180709/web/viewer.html?file=hhh.pdf
                                          这是他自己的设置缺点在于传的值居然只能是 Web中或者相对路径的 pdf 文件
                     2.2 第二种内嵌在外层也就是我展示的这个页面  利用它里面本来就可以传绝对路径做文章把这个值作为参数，                            在url 中传进去并且页面接收后。这个缺点嘛实践多一步不说重点是中文名和符号必须解析后传，然后再接收转译再使用。
用第一种 2.1 我发现  绝对路径也能传！中文也没问题！

周大胖子 · 发表于 2018-7-12 08:52:35

本帖最后由周大胖子于 2018-7-12 09:00 编辑

综上所述最后使用方法：

<iframe src="./../src/lib/pdfjs/web/viewer.html?file=/pdf/嘿.pdf" frameborder="0" class="lm-w100 lm-left-height"></iframe>

复制代码

后面的 class不用管，前台控制iframe 中的 src 就行。传参： PDF的绝对路径。 ?file=路径

PDF 与 IE 的战斗！在线显示PDF内容

浏览过的版块