javascript 在线查看pdf js实现pdf在线预览

转载

信息流星 2024-01-28 18:50:18

文章标签 javascript 在线查看pdf html Access github 文章分类 JavaScript 前端开发

一、PDF介绍

PDF.js是一个由HTML5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的，基于web的解析和渲染PDF文件的平台。https://github.com/ChineseDron/pdf.js# 是从Mozilla原版中fork出来的一个版本，原版的链接在这里https://github.com/mozilla/pdf.js 原版的版次新一些，我们用原版。
原文链接：

1、下载地址

到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download,下载pdfjs插件包，注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。

2、压缩包组成

javascript 在线查看pdf js实现pdf在线预览_github

二、PDFjs插件用法

1、主要用法

在 iframe 标签中使用。假设 pdfjs 包放在目录 ../static 下。则写法如下：

javascript 在线查看pdf js实现pdf在线预览_Access_02

javascript 在线查看pdf js实现pdf在线预览_html_03

1 <iframe id="previewpdf" src=""../static/pdfjs/web/viewer.html?file="+url+"#page=1" width="100%" frameborder="0"></iframe>

View Code

其中，src中的url是pdf文件的预览地址、page是设置pdf打开时从第一页开始显示。

样例

javascript 在线查看pdf js实现pdf在线预览_Access_02

javascript 在线查看pdf js实现pdf在线预览_html_03

1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>pdf文件预览</title>
 6         <script src="../JavaScript/jquery-2.2.4.js"></script>
 7         <script type="text/JavaScript">
 8             $(function () {
 9                 var url = getPdfPreviewUrl(); //获取pdf预览地址
10                 $("#pdfContainer").attr("src", "../static/pdfjs/web/viewer.html?file="+url+"#page=1");
11             });
12         </script>
13     </head>
14     <body>
15         <div id="showPdf">
16             <iframe id="pdfContainer" src="" width="100%" frameborder="0"></iframe>
17         </div>
18     </body>
19 </html>

View Code

三、解决网络路径跨域问题

1、问题描述：访问则出现如下错误。提示：跨域访问被禁止。

javascript 在线查看pdf js实现pdf在线预览_javascript 在线查看pdf_06

2、解决方案

方法1：Windows 服务端，IIS配置允许跨域设置。

1）找到网站Http响应标头，如图

javascript 在线查看pdf js实现pdf在线预览_github_07

2）双击HTTP响应标头，进入添加编辑页。

如图所示添加：

javascript 在线查看pdf js实现pdf在线预览_javascript 在线查看pdf_08

代码如下：Access-Control-Allow-Origin 值：*

Access-Control-Allow-Headers 值：Content-Type, api_key, Authorization

　　　　　　 Access-Control-Allow-Methods 值：POST, GET, OPTIONS

Access-Control-Max-Age 值：60 (自定义设置)

方法2：直接配置网站的Web.config

　代码如下：

javascript 在线查看pdf js实现pdf在线预览_Access_02

javascript 在线查看pdf js实现pdf在线预览_html_03

1 <httpProtocol>
2       <customHeaders>
3         <add name="Access-Control-Allow-Origin" value="*" />
4         <add name="Access-Control-Allow-Headers" value="Content-Type, api_key, Authorization" />
5         <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
6         <add name="Access-Control-Max-Age" value="60" />
7       </customHeaders>
8     </httpProtocol>

View Code

位置如图：

javascript 在线查看pdf js实现pdf在线预览_html_11