vue使用pdf.js实现pdf文件的预览功能

说明

其实实现这个预览代码量很少，核心代码就一行，接下来我介绍一下这个实现过程

准备工作

你首先得准备一个 pdf 插件包，比如：我这边的项目包里的 src 文件夹的 static 文件夹下面就有一个 pdf 的插件包，里面包含 build 以及 web 两个文件夹。

自己去 http://mozilla.github.io/pdf.js/getting_started/#download 下载一个稳定版本的就行，目录大致如下

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE

核心代码实现

1、我们在上面的基础上 用vscode 的 live server 启动一个服务，打开浏览器访问 viewer.html 文件

http://127.0.0.1:5500/apprcontrolweb/src/static/pdfjs/web/viewer.html

页面预览的 pdf 文件正是 compressed.tracemonkey-pldi-09.pdf

我们打开 viewer.js，大概在 4242 行的样子，有个默认的配置项

通过这个 defaultUrl 参数，我们可以快速找到 1818 行

从而确定链接的参数 file 参数就是我们需要的 pdf 文件路径参数

2、通过上面的分析基本确定写法

比如：我这边的写法就是下面的样子，这个就是预览的核心代码

<iframe :src="`../../..${baseUrl}static/pdfjs/web/viewer.html?file=${encodeURIComponent(previewUrl)}`">
</iframe>

这里有几个地方解释一下

第一个：../../..${baseUrl}

这里的 ../ 是跟你写 iframe 标签的文件位置决定的，baseUrl 跟你 vue 打包有关，就是 vue.config.js 配置的 publicPath（规定服务器开始解析的目录）有关。

比如我的就可以直接写成 ../../../ApprControlWeb/static/pdfjs/web/viewer.html?file=${encodeURIComponent(previewUrl)}，因为我规定的解析的目录不管生产还是开发都是 ApprControlWeb，如果你那边生产的时候才配置解析的目录 ApprControlWeb，那这个 baseUrl 就需要你根据开发环境参数去配置了

{
    baseUrl: process.env.NODE_ENV === 'production' ? '/ApprControlWeb/' : '/',
}

第二个：encodeURIComponent(previewUrl)

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

至于里面的 previewUrl 这个参数，就是后端的下载 pdf 的 api

看下我这边的效果如下：

大致链接：

pdf 预览效果：

3、关于打包问题，我们访问的是 ApprControlWeb/static 说明我们打包的时候需要将 static
文件打包进入 ApprControlWeb 包里，不然就没有这个资源可以访问

这个功能的实现需要 copy-webpack-plugin 插件处理，这里建议跟我的版本一样，因为不同版本可以写法不一样

npm i copy-webpack-plugin@^5.1.0 -D

安装好依赖之后

我们需要在 vue.config.js 文件里面配置

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
 configureWebpack: config => {
   if (process.env.NODE_ENV === 'production') {
       // 将单个文件或整个目录复制到构建目录。
       config.plugins.push(
         new CopyWebpackPlugin([{ 
           from: 'src/static',
           to: 'static'
         }])
       );
   }
 }
};

npm run build 之后你会发现，static 打包到 ApprControlWeb 包里了

方法二

如果以上的还是有问题，比如访问静态资源跳转首页，不妨看看第二种做法，更简单一点，我目前就是采用这种的，自己用 nginx 部署项目测试没问题

<iframe
    :src="`${baseUrl}/static/pdfjs/web/viewer.html?file=${encodeURIComponent(previewUrl)}`">
</iframe>

data() {
    return {
        baseUrl: process.env.NODE_ENV === 'production' ? '/ApprControlWeb' : '' // 基础路径
    }
}

不同之处就是 pdfjs 放置的位置不同，直接将下载的包放到 public 目录下就行

如图所示：

【pdfjs资源链接-https://github.com/mozilla/pdf.js/】