ASP.NET 通过pdf.js实现在线PDF预览

2022-03-22 03:05:51

一、PDF介绍

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

1、下载地址

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

2、压缩包组成

二、PDFjs插件用法

1、主要用法

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

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打开时从第一页开始显示。

样例

 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、问题描述：访问则出现如下错误。提示：跨域访问被禁止。

2、解决方案

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

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

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

如图所示添加：

代码如下：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

　代码如下：

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

位置如图：

四、常见错误解决方法

1、页面文件名称显示中文出现乱码问题

这属于js中文乱码问题，你看中文文件名完全没有识别出来，看一下你的viewer.html文件在<head>标记是不是有这句：<meta charset="utf-8">

换成：<meta http-equiv="Content-Type" content="text/html" charset="gb2312" > 就可以啦！说白了就是charset换成gb2312

2、路径问题

　　viewer.html可以通过页面参数传值的方式加载pdf文件，比如我们想打开09.pdf文件的话，只需要这样：

　　先把viewer.js中的参数修改为空：

　　var DEFAULT_URL = ‘‘; //新版本不需要

　　然后把url改写为参数传值：http://localhost:54175/PDFJSInNet/web/viewer.html?file=09.pdf

　　如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：http://localhost:54175/PDFJSInNet/web/viewer.html?file=../doc/09.pdf

　　非常容易通过Visual Studio控制后台代码动态拼出这样一个url字符串。

参考网址：http://www.zyiz.net/tech/detail-94060.html

　　　　 https://blog.csdn.net/xiangcns/article/details/42089189

ASP.NET 通过pdf.js实现在线PDF预览

码农公寓

相关文章