微信公众号或者浏览器实现在线浏览pdf文件
实现在线浏览pdf文件方法
我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏览,因为微信浏览器是基于H5的,所以这个也支持别的浏览器。其实方法很简单,主要需要一个插件pdf.js。你可以直接去官网下载或者在GitHub上有很多还有模板。pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件,基于JavaScript技术编写而成,无需任何本地技术支持。
到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )
开发步骤:
下载之后直接放到你的项目中,放在js文件夹里面就行。这个里面需要你关注的文件主要是viewer.html、pdf.js和viewer.js。在web下面有一个compressed.tracemonkey-pldi-09.pdf文件,这个是用来测试的文件。现在运行你的程序可以直接打开viewer.html这个页面就会在线浏览pdf文件。
现在运行你的程序可以直接打开viewer.html这个页面就会在线浏览pdf文件。
这个是配置pdf文件的地方。
如果我们的pdf需要在本地获取或者是文件服务器获取,我们就将这里直接去空。
在viewer.js中,我们发现他可以通过file参数来指定pdf的路径。
这里我们可以直接跳转到viewer.html,通过window.location.href=“product-descritption-pdf.html?fileContent=”+fileContent; fileContent是你的pdf文件路径。如果是本地的你可以直接在把路径赋给fileContent=“C:\Users\Administrator\Desktop\allss\pdf01 \web\compressed.tracemonkey-pldi-09.pdf”。如果是从文件服务器获取的话,你先要从后台获取到文件服务器的pdf地址然后返给前端就行了。
最后,如果你要从本地或者是文件服务器获取pdf文件,可能会出现跨域问题。其实跨域问题很好解决。看我的另一篇博客:https://blog.csdn.net/weixin_42276004/article/details/89225757