今天在写论文时候参考大疆无人机的阅读文档时候，发现大疆的PDF在线阅读就是使用了PDF.js插件书写。正好想起来那时候一个在线阅读的项目使用过今天在这里给大家详细讲解一下。

一、下载安装软件项目

二、修改代码

一、下载安装软件项目

1、PDF.js是火狐公司出品的插件。插件下载以及预览请点击。http://mozilla.github.io/pdf.js/

2、下载完成之后，解压有两个文件分别是build和web。从字面意思就能明白这两个文件的作用。然后放在服务器相应的路径。

直接在本地打开web/viewer.html，发现并不能成功打开。会出现错误，错误如下图所示：

出现这个问题是本地问题，不是你安装不正确或者是代码错误的问题，只需要我们上传到服务器就可以正常的预览。

二、修改代码

1、上传服务器之后打开web/viewer.html发现可以正常预览。我们发现了，viewer.js中defaultUrl后面只能放一个文件名，如果我要展示多个应该如何呢？

2、这样我们viewer.html可以通过页面参数传值的方式加载pdf文件，先把viewer.js中的参数修改为空如下所示：

defaultUrl: {value: '',kind: OptionKind.VIEWER},

然后在viewer.html最后</body>之前添加下面的代码即可，这样我们就可以通过文件路径进行查看每一个文件，如下：

<a href="自己的文件路径/web/viewer.html?file=../../../../文件名.pdf" target="view_window"></a>

3、这样只需要把pdf放在网址对应的文件夹目录里面（在这儿所放的位置一定要和网址的路径对起来，否则无法访问的），这样我们通过不同网址就可以正常的访问不同的PDF啦。

好啦，在线预览PDF就到这儿结束了，如有不会的可以留言咨询呀。

PDF.js插件 | 在线PDF阅读插件，支持手机在线阅读相关推荐

pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
pdf在html网页中打开是乱码,pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
关于使用pdf.js预览pdf的一些问题
手机应用中pdf展示使用非常广泛, 一些pdf由于特殊的内容比如文字.电子签章必须使用复杂的解析器来解析,当使用MultiPdf 这个库加载,会使得包变得非常庞大, 这里我们考虑使用pdf.js 来解 ...
解决pdf.js预览pdf不显示签名问题(两条路)
解决pdf.js预览pdf不显示签名问题(两条路) 解决这个问题的方法很有意思,解决这一类问题的思路就是:如何不让pdf.js抛出异常或者警告.[其实乍一看好像和问题本身并不沾边,哈哈] 电子签章不显 ...
在线阅读文库系统开发支持手机在线观看下载文档（一）
这个是前端部分的,内容详细页面,这是接着更新的进行完善的功能的,希望本文章可以帮到大家的学习和使用. 在线文库网站程序源码,文库小程序平台开发建设野兔文库系统提供专业文库网站系统定制开发建设,也是一 ...
html5 pdf.js 使用方法,PDF 文件在线预览(pdf.js 使用教程)
因项目开发需要在线展示 PDF文件,为解决 PDF文件在浏览器打开后电子签章.电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题: pdf.js框架为HTML5,无需任何本地支持,兼 ...
pdf.js javascript实现pdf阅读器
这几天项目开发的过程中,需要用到在线生成电子合同,后来在网上找了一个资源:pdf.js,下载源码后来将pdf.js下载下来了,就捣鼓着怎么用,大体是以下步骤: 第一步: 下载源码第二步: 新建一个 ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs ...
PDF.js 预览pdf文件流预览pdf，及ie浏览器兼容性问题，解决方案！！（开发笔记）
一. 官网下载pdf.js :Getting Started 注意: 这俩包都不支持ie,因为用的是es6,ie解析不出来下完以后引进去.下面为省事找几个市面上常用的方法: 1.文件流转base ...

PDF.js插件 | 在线PDF阅读插件，支持手机在线阅读

一、下载安装软件项目

二、修改代码

好啦，在线预览PDF就到这儿结束了，如有不会的可以留言咨询呀。

PDF.js插件 | 在线PDF阅读插件，支持手机在线阅读相关推荐

最新文章

热门文章