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

妖狐艹你老母 2022-12-08 01:48 399阅读 0赞

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

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

链接：[https://mozilla.github.com/pdf.js/web/viewer.html][https_mozilla.github.com_pdf.js_web_viewer.html]

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

1.9.426

![20200917095139489.png][]

2.5.207

![20200917095210162.png][].

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

--------------------

## 1.部署pdfjs ##

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

链接: https://pan.baidu.com/s/1yTthoG8KTwrEp2bFn-bxAA 提取码: cir4

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

![2020091709563543.png][]

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

我这里就放在iis里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 1][]

## 2.修改pdfjs参数 ##

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

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

上例子！

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

![20200917101634949.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 3][]

## 3.后台获取文件流打开 ##

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

3.1设为空值

![20200917101014960.png][]

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

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

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

![20200917101958304.png][]

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

![20200917102136458.png][]

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

![20200917102154904.png][]

这里顺便附上我后台文件流的写法（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][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]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 4][]

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

## 4.可能会遇到的问题 ##

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

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

2.标题乱码

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

3.跨域问题

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

![20200917103226445.png][]

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

![20200917103337218.png][]

--------------------

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

[https_mozilla.github.com_pdf.js_web_viewer.html]: https://mozilla.github.com/pdf.js/web/viewer.html
[20200917095139489.png]: /images/20221123/f4c9c8352f554147976c674936cbf359.png
[20200917095210162.png]: /images/20221123/880ffd8e750c46b385e39d7837511a9b.png
[2020091709563543.png]: /images/20221123/69ece47932f44498bc1a91eb0ecce133.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70]: /images/20221123/e5824aa4decc40098ffbf768e5a32b02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/1f2fd889411b45628a47bb948bdf500b.png
[20200917100256243.png]: /images/20221123/fce2f8678c46405b9878b641030733a1.png
[20200917101634949.png]: /images/20221123/05936d61a95c4bc0a445812ec9cdc289.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200917101643552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 3]: /images/20221123/a53e7b9bf8dc4a36ba1e58b4e614040e.png
[20200917101014960.png]: /images/20221123/8cbf563099ad4c57a2c2cf7ce806adcd.png
[http_localhost_45644_web_viewer.html]: http://localhost:45644/web/viewer.html
[20200917101958304.png]: /images/20221123/55196affda3f451784ad267bead46f99.png
[20200917102136458.png]: /images/20221123/476eae242c7f4758b99be9e5daa8e849.png
[20200917102154904.png]: /images/20221123/0720eafaf5634b88aedd7311464de4a9.png
[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]: 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
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 4]: /images/20221123/c26b97815dd34aeeb1b34166451d90db.png
[20200917102811693.png]: /images/20221123/01a467a707d04a1f9971d92aa60f46a1.png
[20200917102907282.png]: https://img-blog.csdnimg.cn/20200917102907282.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3eTA3MjQ_size_16_color_FFFFFF_t_70 5]: /images/20221123/896627fdc9a1436799b469b53e90e5d0.png
[20200917103226445.png]: /images/20221123/17a028c585994d7cab74d2d4796994fb.png
[20200917103337218.png]: /images/20221123/01e9570095b64f2783bb7feca4a0bc65.png