PDF 与 IE 的战斗！在线显示PDF内容
本帖最后由 周大胖子 于 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=i||function(){
(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o);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: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 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=路径
页:
[1]