利用pdf.js封装vue组件在vue中实现在线pdf查看

pdf.js是一款开源的pdf文档读取解析插件，可以直接在html中进行pdf预览。

pdf可以直接下载，下载地址：http://mozilla.github.io/pdf.js/。pdf.js主要包含两个库文件，一个pdf.js和pdf.worker.js，一个负责api解析，一个负责核心解析。

也可以直接进行下载使用，我这边使用的是cnpm下载。

1. 安装

 cnpm isntall --save pdfjs-dist

2. 以组件的形式新建一个页面，CPdf.vue

然后按照需求去进行页面布局，我做的功能是一个合同查看功能，html如下：

样式如下：

然后js如下：

这样一个pdf查看的组件就封装好了，只要按需在使用到此组件的页面引入就可以了。

引入：

import  CPdf from "../components/commons/pdf/CPdf";

使用：

pdfurl为pdf文件的地址，按照自己的地址引入，就可以正常显示pdf了。