浅谈php网站增加在线阅读pdf文件(织梦cms在线pdf阅读)

  • A+
所属分类:织梦CMS

已经有一段时间没有发布文档了,近来工作比较忙,公司的事情比较多,所以没顾上博客内容的更新。话不多说,今天发布文档的重点是以织梦cms为代表,总结下php网站增加pdf文件在线阅读的方法。

参阅了无数网友的方法和建议,结合自己的经验和摸索水平,综合出2个运用js的简单方法:

  1. pdfobject.js方法,在网站里面加入pdfobject.js文件来实现。不兼容html5
  2. pdf.js方法,在网站里面加入pdf.js包实现,包中包含多个文件。兼容支持html5

 

pdfobject.js方法:

 

展开

1.1首先下载pdfobject.js,目前网上流传的是1.2版本的,其实开发者于2016年升级到了2.0版本,只不过都没时间去研究新的版本和升级的内容,一并感谢下开发者,无私的奉献。下载后,将其放到skin/js文件夹中。

1.2用Dreamweaver打开文章详情页article_article.htm,增加js的引用代码和一段pdf加载代码

  1. <script src="/skin/js/pdfobject.js" ></script>
  1. <script type="text/javascript">
  2.         window.onload = function (){
  3.             var success = new PDFObject({ url: "{dede:global.cfg_basehost/}/{dede:field.pdfurl/}" ,pdfOpenParams: { scrollbars: '0', toolbar: '0', statusbar: '0'}}).embed("pdf1");
  4.         };
  5.     </script>

1.3再在文章详情页article_article.htm放入用于显示pdf的代码

  1. <div id="pdf1" style="width:100%; height:800px;"></div>

这三步做完后,我们还需要在文章详情页article_article.htm的内容模型中,增加一个字段pdfurl,因为我们在1.2中的加载代码中已经有所提示,是调用pdfurl这个字段.

浅谈php网站增加在线阅读pdf文件(织梦cms在线pdf阅读)

浅谈php网站增加在线阅读pdf文件(织梦cms在线pdf阅读)

浅谈php网站增加在线阅读pdf文件(织梦cms在线pdf阅读)

至此,pdfobject.js方法就结束,过程简单,但这中间需要理的思路不少。

pdf.js方法:

 

展开

2.1首先下载pdf.js包,这个包中包含build和web两个文件夹

浅谈php网站增加在线阅读pdf文件(织梦cms在线pdf阅读)

与pdfobject不同的是,我们不需要引用它里面的js文件,只需要把web里面的viewer.html用框架放到文章详情页article_article.htm中即可

  1. <iframe src="/pdf/web/viewer.html?file={dede:field.pdfurl/}" width="100%" height="800px"></iframe>

很明显,pdfurl直接被带到了viewer.html的后面作为参数。剩下的操作就是内容模型中增加一个pdf附件字段了,和上一步中的一样。

最后,总结一下,pdf.js方法可以将工具条中的按钮隐藏,比如隐藏下载,隐藏打印,但是pdfobject.js方法就是做不到的。同时,pdf.js还支持html5,也就是手机也兼容,自适应。所以我最后也选择了pdf.js这个方法。仅此纪念下这些天睡不着觉的折腾,研究,白天公司的事,晚上自己的事,好忙啊!但是当想要的效果出来时,觉得一切都值了!

KevenT

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: