Pdfjs使用
好记性不如烂笔头。
今天同事问我,如何在手机端显示pdf文件,我张口就来使用 pdfjs 啊,怎么用?我蒙了,说实话,我当时使用pdfjs的时候,确实还是废了一番周折的,后来项目结束,什么都不记得了。(对我的未来担忧啊!),今天再看看原先的代码,整理一下。
如果你去官网查看的话,其实上面很乱的,根本不能一下就找到如何快速的使用pdfjs。
1.下载perbuild版本
getting_started ,下载下来会有两个文件夹一个是build,一个是web文件夹。web文件夹下有个viewer.html,这个就是主角了。
2.预览pdf
viewer.html把基本的上一页下一页等按钮都搭建好了,只需要传入一个file参数即可,例:“../web/viewer.html?file=web/test.pdf”,要保证file这个文件可达,也可以使用网络路径或者相对路径。
3.配合后台
使用pdfjs,一般都是需要后台的,起码这个file参数的文件要能够通过服务器访问道。这里已spring boot为例说明:
下载安装:
下载Pre-build版本,解压后,将解压出的web文件夹(内含viewer.html)和build文件夹(内含pdf.js和pdf.worker.js),拷贝到src/main/resource/pdfjs文件夹下, 完成pdfjs的安装。
1 | pnpm add pdfjs-dist |
添加资源映射
将pdfjs放到了resource文件夹下了,要让外部可以访问到。继承WebMvcConfigurerAdapter,重写addResourceHandlers方法。
1 | import cn.zjch.common.support.JSON.JsonReturnHandler; |
至于file这个参数的文件地址,无论使用相对目录还是网络路径,应该保证可以获取到。我使用了”/pdfjs/web/viewer.html?file=static/resource/“,当然static也是做过资源映射了。
其他人的文章:
【1】.pdf.js的使用实例:https://www.jianshu.com/p/9cd4840f9323
【2】.关于使用pdfjs预览PDF文件:https://www.jianshu.com/p/df5f9726cbbf
总是提示没有安装
在一个新的电脑上执行了 pnpm install 之后,总是提示要安装:npm install pdfjs-dist。后来解决方法也非常的奇怪,一会安装了,卸载了,一会又remove,最后又不弹出问题了,真是奇怪。
【1】.直接引入pdfjs-dist会报错 2.8.335版本之前引入方式和之后引入方法不同
【2】.Vue使用pdfjs-dist遇到的坑 安装失败:npm install 报错 npm ERR code ERESOLVE npm ERR ERESOLVE unable to resolve dependency tree
【3】.vue引入pdfjs-dist 2.8.335版本之后报错