pdf.js的使用（C#后台返回pdf文件流）

最近需要用到一个pdf展示的功能，本来是打算用浏览器自带的预览，直接用window.open打开，但是由于在磁盘上的pdf文件都是随机字符串命名，一些标题和下载名称会不对，所以引用了这个pdfjs插件，这里记录一下使用过程

首先放着pdf.js的官方演示，这个地址经常访问超时，我也不知道怎么回事 

链接：https://mozilla.github.com/pdf.js/web/viewer.html

注意，现在官网已经更新到2.0+版本，在2.0后的版本，有些字段修改方式不一样，我昨天比对了一下，在官网最新的2.5.207版本中，已经没有DEFAULT_URL这个参数，我看了一下csdn里面大部分的教程都是说修改DEFAULT_URL这个参数，所以可能已经不太适用新版本，下面放上两张对比图

1.9.426

2.5.207

.

我使用的版本是1.9版本，所以后面教程也是基于这个版本，对新版本可能会有不适用的地方，废话说完了，上干货

---

1.部署pdfjs

我这里放上我自己用的版本

链接: https://pan.baidu.com/s/1fLZ1YNJmxe57YZ9Fuh20RQ?pwd=pg2g 提取码: pg2g 复制这段内容后打开百度网盘手机App，操作更方便哦

下好后解压，目录结构为下图

如果单独部署来跑的话，就在iis或者tomcat里创建一个新网站指向到这里，放在项目中的话，直接通过项目地址访问

我这里就放在iis里

然后可以尝试访问一下，需要访问web下viewer.html文件，如图，如果pdf正常加载，说明插件是没有问题的，现在进入项目

2.修改pdfjs参数

如果你不是通过后台加载，而是明确的访问一下路径，那么我们只用修改viewer.js文件中的pdf路径参数即可，如图

这个参数也是默认加载的pdf，就像你上面首次访问他加载的pdf，这里改为你的pdf路径如var DEFAULT_URL = '09.pdf';，如果不在同级目录，那就写相对路径var DEFAULT_URL = ' ../doc/ 09.pdf';

上例子！

例如，我改变参数指定的pdf（同级目录）

3.后台获取文件流打开

如果需要自己制定地址打开，那么就需要把DEFAULT_URL设为空值，并且在访问的地址后追加file参数并跟上你的文件地址

3.1设为空值

3.2追加参数，如果你的访问地址是http://localhost:45644/web/viewer.html，那么替换的方式就是http://localhost:45644/web/viewer.html?file=你的文件来源

注意，file后面的地址参数需要用encodeURIComponent转码，如果不转码会出现两个？的地址，会报错，而转码后，pdfjs对两个？的进行了处理，这里可以看源码

例如，先定义一个你pdfjs的加载地址

然后，定义你文件的地址来源，我这里直接是后台返回的byte流

接着就拼接起来一个完整的地址

这里顺便附上我后台文件流的写法（C#）

public void ReadFileToPDF(string fileid,string name)
        {
            try
            {
                Response.Clear();
                Response.BufferOutput = true;
                Response.AddHeader("Content-Disposition", "attachment; filename=" + name);
                Response.AppendHeader("Contenttype", "application/octet-stream");

                FileStream fs = new FileStream(OAPDFFileWordUrl + fileid, FileMode.Open, FileAccess.Read);
                byte[] by = new byte[fs.Length];
                fs.Read(by, 0, (int)fs.Length);

                Response.BinaryWrite(by);

                try { Response.Flush(); }
                catch { }
                finally
                {
                    System.Web.HttpContext.Current.ApplicationInstance.CompleteRequest();
                }
            }
            catch (Exception ex)
            {

                throw ex;
            }
        }

展示就如图，具体的url是这样

http://localhost:831/Scripts/pdfjs/web/viewer.html?file=http%3A%2F%2Flocalhost%3A831%2FNtkoOffice%2FReadFileToPDF%3Ffileid%3D760f9890ea9d46f092edfba96c5593fd.pdf%26name%3D%E6%B5%8B%E8%AF%95pdf4.pdf

这样一来，整个获取文件流到展示的过程就完成了，其中会遇到几个问题，在下面提醒一下

4.可能会遇到的问题

1.页面按钮是英文，并且locale.properties文件报错（f12控制台）

这个是因为iis的mime类型没有配置properties文件类型，程序访问不到，这里面是一个语言包，在iis你项目的部署下添加mime类型

2.标题乱码

除开你文件来源问题，这里可能就是编码问题，在viewer.html中，修改这个参数

3.跨域问题

这里的跨域有两种，可能就算你在同域名下他也会报错，报错信息如下

这里参照别人的方法，直接在viewer.js把这段代码注释掉就可以正常加载了，比较神奇..

---

 一个基本的使用pdfjs步骤就到这里完成了，新旧版本不同的更改方式确实捣鼓了我半天，新版本的话需要自定义一个DEFAULT_URL参数，并且替换defaulturl里的参数，这里我就不详细说了，希望这篇文章可以帮你更快的上手，过程中有问题的可以百度或者留言（虽然不一定能解决），点个赞吧~