前端用pdfjs实现预览PDF

目录

一.下载

二.解压

​三.把pdfjs引入到react开发的单页面应用中实现预览pdf文件

---

最近做项目，产品经理要求实现预览PDF，最起初是采用iframe标签，把服务器返回的一个可预览的链接扔到iframe标签的src中，就实现预览了，但是这种实现有一个弊端，就是预览出来的pdf是可以选中并且复制的，但是产品经理要求不可复制于是就换了一种思路，采用pdfjs这个开源包来实现预览PDF，具体实现的技术细节请参考如下步骤：

一.下载

下载请前往官网下载，具体链接：PDFjs预览插件官方下载地址，要下载stable版本，下载后是zip压缩包，要用解压工具给解压一下

二.解压

解压之后的文件放到项目中， 文档的目录如下：

里面的核心文件也就是build文件夹下的pdf.js和pdf.worker.js；web下的images文件夹主要是用来存放预览文件时的一些图标，此插件在不同的大小屏幕中做了适配，对应的图标尺寸也是不同的，都可以在images文件下看出来；locale是用来处理多语言的，这个看自己的个人需求是否要加上这个；cmaps这个文件夹的用途暂不清楚。

打开web文件夹下的viewer.html，直接点viewer.html是无法预览默认文档的，我是在webstorm中点击通过浏览器预览来预览默认文档的，

可以在浏览器预览一下默认的pdf文档，如下图所示：

三.把pdfjs引入到react开发的单页面应用中实现预览pdf文件

因为本次开发react的SPA应用采用的脚手架是antd pro4，所以就以antd pro4为例子来展开说明；具体可以下antd pro4的官方文档，看一下该脚手架对整个项目的文件夹的架构；

• 首先要把pdfjs整个解压之后的文件包放在public文件夹下

我是根据我们公司业务的需要，以及打包之后整体文件的考虑，对pdfjs解压后的文件进行了部分删减，具体如下：

放入进去public之后，还要配置一下Dockefile，确报public文件夹下的有关pdfjs的文件是被打包之后放到服务器上的；

• 线上实现用pdfjs插件预览pdf文件

要想用线上的链接来实现预览，需要把一个可以访问的链接放在viewer.html后面，并且拼接上file=文件路径，具体代码如下：

以上就是有关pdf实现预览的全部代码了，希望对你的技术提升有所帮助！

喜欢的就点赞吧，或者在下方评论参与讨论吧！