项目中时常会遇到在线预览PDF文件的需求，网上一找也能找到很多，但被使用率高的并不多，经过多次实验发现被应该最多的还属pdfjs插件。

首先介绍下：Pdf.js插件是由Mozilla 主导推出的

作用：在线预览PDF文件。

使用方法：肯定是去官方网站下载文件代码包了

第一步:上官网下载：/https://mozilla.github.io/pdf.js/getting_started/#download

可以通过码云仓库下载：https://gitee.com/hyser/pdf-js.git

第二步：代码实际操作

1、把文件pdfjs扔项目中

2、pdfJs的目录结构（如图1）：

build是一些核心文件，web中的viewer.html就是需要使用到的母版文件。

1、将整个文件夹放入自己的工程文件里，因为在使用的过程中要跳转至母版文件，所以要注意文件的放置位置要方便使用。避免出现问题，这里建议放在与public同级目录static下。

2、代码：为了更清晰，这里把实现中所有代码都贴上来了

1) 在某个路由里做个demo代码贴进来就行，当然要放template里哈，用iframe引入，pdfSrc为pdf线上地址变量

用着的变量

Pdf地址放iframe上

高度样式自行调整

 

 

可以看到左侧是缩略图，右侧菜单还有各项功能，移动端还可以启用手形工具，我的截图里把部分功能隐藏了

一般情况下，pdf在线阅读都不希望被下载或打印，因此需要将右上角那几个按钮隐藏。

可以修改viewer.js文件，搜索 webViewerInitialized() 部分（大概2242行），在 appConfig 下面插入下面的代码即可：

再次运行viewer.html，发现右上角的打开、下载、打印等按钮都不见了。