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

一、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

3、解决找不到locale.properties和xxx.bcmap文件问题（可以还能解决缓存问题）

     在IIS中找到MIME类型，添加后缀properties和bcmap，类型填写：application/octet-stream

   参考网址：https://www.cnblogs.com/dullfish/p/6957939.html

posted @   fyshao  阅读(3045)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛