已经有一段时间没有发布文档了,近来工作比较忙,公司的事情比较多,所以没顾上博客内容的更新。话不多说,今天发布文档的重点是以织梦cms为代表,总结下php网站增加pdf文件在线阅读的方法。
参阅了无数网友的方法和建议,结合自己的经验和摸索水平,综合出2个运用js的简单方法:
- pdfobject.js方法,在网站里面加入pdfobject.js文件来实现。不兼容html5
- pdf.js方法,在网站里面加入pdf.js包实现,包中包含多个文件。兼容支持html5
pdfobject.js方法:
[s][p]
1.1首先下载pdfobject.js,目前网上流传的是1.2版本的,其实开发者于2016年升级到了2.0版本,只不过都没时间去研究新的版本和升级的内容,一并感谢下开发者,无私的奉献。下载后,将其放到skin/js文件夹中。
1.2用Dreamweaver打开文章详情页article_article.htm,增加js的引用代码和一段pdf加载代码
- <script src=“/skin/js/pdfobject.js” ></script>
- <script type=“text/javascript”>
- window.onload = function (){
- var success = new PDFObject({ url: “{dede:global.cfg_basehost/}/{dede:field.pdfurl/}” ,pdfOpenParams: { scrollbars: ‘0’, toolbar: ‘0’, statusbar: ‘0’}}).embed(“pdf1”);
- };
- </script>
1.3再在文章详情页article_article.htm放入用于显示pdf的代码
- <div id=“pdf1” style=“width:100%; height:800px;”></div>
这三步做完后,我们还需要在文章详情页article_article.htm的内容模型中,增加一个字段pdfurl,因为我们在1.2中的加载代码中已经有所提示,是调用pdfurl这个字段.
至此,pdfobject.js方法就结束,过程简单,但这中间需要理的思路不少。
[/p]
pdf.js方法:
[s][p]
2.1首先下载pdf.js包,这个包中包含build和web两个文件夹
与pdfobject不同的是,我们不需要引用它里面的js文件,只需要把web里面的viewer.html用框架放到文章详情页article_article.htm中即可
- <iframe src=“/pdf/web/viewer.html?file={dede:field.pdfurl/}” width=“100%” height=“800px”></iframe>
很明显,pdfurl直接被带到了viewer.html的后面作为参数。剩下的操作就是内容模型中增加一个pdf附件字段了,和上一步中的一样。
[/p]
最后,总结一下,pdf.js方法可以将工具条中的按钮隐藏,比如隐藏下载,隐藏打印,但是pdfobject.js方法就是做不到的。同时,pdf.js还支持html5,也就是手机也兼容,自适应。所以我最后也选择了pdf.js这个方法。仅此纪念下这些天睡不着觉的折腾,研究,白天公司的事,晚上自己的事,好忙啊!但是当想要的效果出来时,觉得一切都值了!