利用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

利用pdf.js封装vue组件在vue中实现在线pdf查看_第1张图片

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

样式如下:

 

然后js如下:

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

引入:

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

使用:

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

你可能感兴趣的:(vue,pdf在线查看,pdf查看,vue,组件,pdf.js)