pdf.js不通过服务器如何像普通js文件引入使用 财富值35

2016-10-27 11:17发布

需要实现在微信浏览器中直接预览PDF,一般情况下,一个服务器上的PDF文件在目前的微信里,IOS可以直接预览,但是Android不可以,而是提示下载或者在QQ浏览器中打开之类的。现在想实现直接在微信浏览器中预览。
查阅资料,比较好用的是pdf.js,但是它不像普通的jquery插件一样引入配置一下即可,在我的观察试验,需要node环境或者gulp dist等生成一个服务器,才能跑起来,gitHub 地址:https://github.com/mozilla/pd...
哪位大神能说说自己的使用经验,我想用example下面的mobile的样式和js,我怎么配置就可以使用静态的文件,主要是映射pdf.worker.js和我想要预览的pdf文件位置,这个是关键,有经验的给我分享下?!

还有补充,这样的实现方式感觉有点重,毕竟手机端处理要加载很多东西,文件又打,不如在服务器端处理返回,这样做合适吗?在服务器端,又要如何配置使用

17条回答

之前有点忙,现在来补充一下这个问题的解决方案:
由于发现在苹果手机的微信直接打来非常流畅,所以在苹果手机的微信打开服务器上的pdf时,不采用pdf.js,直接打开,这个解决方案是针对安卓手机在微信打开PDF,并直接在微信中预览(带着手机预览的样式),不用通过QQ浏览器或者其他的软件打开。

在服务器的那种我也试过了,服务器那种通过gulp其实就是生成了目录映射,然后相互依赖映射,最终就可以渲染出pdf了。

使用静态的类似jquery插件的引入,原理是这样,一定要知道页面中引入的各个js的作用,静态的这种使用方式,里面如果有逻辑,就对应写在node中,找到你需要显示的pdf,我是一直拿一个作为测试使用的。

其中../../public/images/h5.pdf是暂时用来做demo的一个pgf文件,存在images下

特别的一点就是在页面中有

这样的话,用到了UA,在node中这样处理,

在pdfjs-dist下
build下,pdf.js和pdf.worker.js是肯定需要的,这是基本(worker文件不需要引入);
web下,pdf_viewer.js和pdf_view.css是形成pdf样式所需要的文件,
以上这些,在任何其他的需要打开pdf,都是需要的
viewer.js,viewer.css就是这里手机显示的样式,这也是从那个example中的手机预览拿过来的,当然有些cmaps,images,就是人家要显示成那样的样式的辅助元素,要是需要显示成其他的样式,在example中有一些其他的,可以自己去找自己需要的。我是这么理解的。

其实其中最重要的一步,就是在viewer.js中配置pdf.worker.js的映射目录,让映射目录能找到,这都是静态的引用方式。但是要注意文件夹的名称和文件位置,不然会一直提示报错的。

页面如下,html结构直接就是官方的手机预览结构我一点都没有变,如下箭头指示的样式

一周热门 更多>