美文网首页
pdf.js使用方法

pdf.js使用方法

作者: 麦芽maiya | 来源:发表于2020-08-25 13:42 被阅读0次

pdf.js使用步骤

一. 到官网下载 pdf.js 插件并解压  (地址:http://mozilla.github.io/pdf.js/)

1: 进入官网

 2 : 选择稳定版 下载

3: 下载至本地

4 : 解压

5:创建PDF.js文件夹 并将刚解压的文件放入其中

二.将 PDF.js 文件夹 放到 项目服务器根目录下

小伙伴 可能会有点头晕 先跟着做 稍后解释

1.登录 项目服务器

2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录

三. 使用 pdf.js 显示 pdf 文件

1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址

这里我用我的服务器 地址进行演示 10.0.0.5

2.当 你访问 项目 服务器 根目录(10.0.0.5) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了

3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html)

4.随后会显示 截图上的 pdf 文件

5.在地址栏中http://10.0.0.5/PDF.js/web/viewer.html?file=你的pdf地址

解释: 我这里显示的pdf文件 是服务器上本来 就有的测试文件 请看下图

如果 你的 地址栏 中 ? 后面 file = PDF地址  可以显示 pdf 那么 基本上成功了

四. 在项目中使用

1 &lt;iframe :src=<span class="hljs-string">"http://10.0.0.5/PDF.js/web/viewer.html?file=PDF地址"</span> width=<span class="hljs-string">"100%"</span> height=<span class="hljs-string">"99%"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span></span>

开篇 说一行代码就可以搞定 非常easy

到这里 PDF.js 的使用讲述完了

相关文章

网友评论

      本文标题:pdf.js使用方法

      本文链接:https://www.haomeiwen.com/subject/iheijktx.html