c#web页面显示弹窗_web页面实现PDF读取显示

什么是PDF.js

PDF.js是一个用于构建在HTML5中Portable Document Format (PDF)浏览插件。

重点：

1）使用在HTML5中，那么一些比较老的不支持HTML5的浏览器，就不能使用PDF.js。因为HTML5跨平台的好处，PDF.js不仅可以在 PC端使用，也支持移动端使用。

2）PDF浏览插件，本质上就是读取、显示PDF文件的库，这个库用JavaScript编写。

使用后的页面呈现效果：

PDF.js是怎么解析PDF文件

PDF是由Adobe Systems在1993年用于文件交换所发展出的文件格式。现在已经成为ISO国际文件标准。既然是标准，必然是通用可解析，可编码的。

解析过程：

1）读取PDF文件。
2）使用标准规范，解析内容。具体标准内容参考：ISO 32000-1，这里就不展开。

为什么使用PDF.js

我有几套备选方案分别是：

1）静态资源用浏览器直接打开PDF。但是它开放了所有的功能，而我们希望是页面只能浏览，不能下载，所以这个方案满足不了。

2）使用VUE-PDF.js作为 PDF浏览器插件，功能满足而且和项目使用VUE比较配，但是用户在浏览PDF的时候，操作不方便，体验不够理想。

3）PDF.js目前还是比较理想的方案，同时满足了定制功能，比如禁止下载PDF、禁止打印。通过修改其源代码就可以满足了。实际效果见：i-book.top。

如何使用PDF.js

1）获取代码并使用自带例子。

从github上克隆代码。

$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js

通过官方安装包或者NVM，安装gulp-cli（构建工具）。

$ npm install -g gulp-cli

为PDF.js安装依赖库

$ npm install

最后，需要开启本地的web server，因为浏览器不支持file://URL方式打开 PDF。

$ gulp server

2）编译PDF.js。

$ gulp generic

3）在Web应用程序中使用PDF.js。

第一种方式，如果没有特殊需要，使用官方预编译的包，比较高效。下载路径：https://github.com/mozilla/pdf.js/releases

也可以使用

NPM

npm install pdfjs-dist --save

Webpack

npm install pdfjs-dist --save-dev

Browserify

npm install pdfjs-dist --save-dev

这种方式，在项目需要添加'pdfjs-dist'库再使用。

第二种方式，如果需要定制化，比如禁止下载PDF文件的功能，那就需要重新调整 UI，再编译PDF.js库。

1）下载https://github.com/mozilla/pdf.js/archive/gh-pages.zip.

2）加压，复制下面两个目录到你的工程目录：

pdf.js-gh-pages/build/
pdf.js-gh-pages/web/

3）打开viewer.html传入PDF文件参数即可

<a href="/web/viewer.html?file=%2Fyourpdf.pdf">Open yourpdf.pdf with PDF.js</a>

我实际项目中使用了VUE作为基础框架，访问 i-book.top 体验具体的操作。效果如下。

点击看书进入PDF显示

PDF显示效果

具备放大、缩小、前一页、后一页、书签、文档结构，操作非常方便，不错的用户体验。

参考:

源代码 https://github.com/mozilla/pdf.js
官方网站：PDF.js
项目应用效果：i-book.top

c#web页面显示弹窗_web页面实现PDF读取显示相关推荐

c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...
.net web 点击链接在页面指定位置显示DIV的问题
.net web 点击链接在页面指定位置显示DIV的问题做了一个网页,放了两个DataList ,一个显示科室,一个显示科室中的人员,由于科室太多,一屏显示不全,为了在页面刷新时记住上次浏览位置,所 ...
web系统维护时显示维护状态页面
1.为什么需要显示维护状态页面? 在系统后台更新维护期间,用户按照原地址访问的时候会出现404, 如果不告诉用户当前系统处在维护状态, 用户会以为自己的网络有问题,亦或是自己记错了网站的地址. 因为给 ...
SpringMVC框架学习DAY_01:框架概括 / 简易应用 / 核心执行流程图 /在框架下显示HTML模板页面/ 接受请求
1. SpringMVC框架的作用 MVC = Model(数据模型) + View(视图) + Controller(控制器) SpringMVC框架主要解决了接收请求与处理响应的问题,也可以认为是 ...
高性能WEB开发(11) - flush让页面分块,逐步呈现
在处理比较耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应.一般大家在处理这种情况,都使用ajax,先把html输出到客户端,然后再用ajax取加载比较耗时 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (九) —— jQuery Mobile 页面与对话框
在<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 基础>中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当 ...
vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）
本文只适用于单页面项目,多页面项目请查看我另一篇博文 vue如何在一个工程里显示pc和手机端(适用多页面复杂项目) https://blog.csdn.net/qq_37816525/article/ ...
web页面中实现局部页面的刷新
需求:当web页面中有部分布局相同的,而另一部分不同的时候就需要实现页面的局部跳转或刷新. 实现技术:iframe+input 功能:将页面中不同的部分编写为几个新的HTML文件,在主界面中使用< ...
Web前端教程分享：页面性能优化办法有哪些？
引子互联网有一项著名的8秒原则.用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问.大部分用户希望网页能在2秒之内就完成加载.事实上,加载时间每多1秒,你 ...

c#web页面显示弹窗_web页面实现PDF读取显示

c#web页面显示弹窗_web页面实现PDF读取显示相关推荐

最新文章

热门文章