乐于分享
好东西不私藏

开发笔记:在网页中加载pdf文件

开发笔记:在网页中加载pdf文件

使用PDF.js解析和渲染PDF

这是一个通用的基于网页标准的平台。PDF.js采用Apache 2.0授权, 文档采用CC BY-SA 2.5授权。
我们在什么情况下会在网页中渲染pdf?核心使用场景有以下几个:

1. 文档在线阅读

产品手册/说明书 – 汽车、家电、软件产品的技术文档
电子书/教材 – 在线教育平台、数字图书馆
研究报告 – 学术论文、行业分析报告
合同/协议 – 在线签署前预览

2. 企业应用

报表展示 – 财务报表、销售数据报表
发票/账单 – 电商平台订单发票、公用事业账单
员工手册/政策文件 – 企业内部文档共享
资质证书 – 企业资质、产品认证文档展示

3. 专业服务

医疗记录 – 电子病历、检查报告(需加密)
法律文件 – 法律文书、证据材料
建筑设计图 – 施工图纸、设计方案
政府公文 – 公告、政策文件公开

4. 内容分享

个人简历 – 招聘网站简历展示
作品集 – 设计师、摄影师作品展示
活动手册 – 会议资料、活动指南
新闻稿/白皮书 – 企业宣传材料

pdf.js基于Web标准,Canvas/SVG渲染:不依赖Flash、ActiveX等插件,HTML5原生支持,现代浏览器全兼容。

pdf.js项目github官网:https://github.com/mozilla/pdf.js
下载最新稳定版v5.4.530,解压后文件目录是这样:
├── build/│   ├── pdf.mjs                            - display layer│   ├── pdf.mjs.map                        - display layer's source map│   ├── pdf.worker.mjs                     - core layer│   └── pdf.worker.mjs.map                 - core layer's source map├── web/│   ├── cmaps/                             - character maps (required by core)│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes│   ├── images/                            - images for the viewer and annotation icons│   ├── locale/                            - translation files│   ├── viewer.css                         - viewer style sheet│   ├── viewer.html                        - viewer layout│   ├── viewer.mjs                         - viewer layer│   └── viewer.mjs.map                     - viewer layer's source map└── LICENSE

下载的这个项目中包含示例pdf,但是直接用浏览器打开viewer.html,无法查看示例pdf文件,需要将pdfjs-5.4.530-dist包部署在IIS服务器上,通过http方式访问才能显示pdf文件内容。

在IIS上部署后,访问
http://localhost:8080/pdfjs/web/viewer.html

通过以上操作如果无法加载显示pdf文件,可以尝试下面解决方法:

在IIS服务器添加MIME类型

添加.mjs,.ftl,.properties三个类型。

添加完成后,刷新页面成功显示pdf。

本站文章均为手工撰写未经允许谢绝转载:夜雨聆风 » 开发笔记:在网页中加载pdf文件

评论 抢沙发

1 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮