前端用pdfjs实现预览PDF

目录

一.下载

二.解压

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


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

一.下载

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

二.解压

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

前端用pdfjs实现预览PDF_第1张图片

里面的核心文件也就是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解压后的文件进行了部分删减,具体如下:

前端用pdfjs实现预览PDF_第2张图片

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

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

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

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

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

 

 

你可能感兴趣的:(JS高级,javascript,PDF预览)