PDF.js使用总结

PDF.js是为html5实现的在线预览pdf框架，所以使用的前提是浏览器要支持html5。该插件不需要任何本地支持，对浏览器的兼容性也比较好（低版本的IE浏览器请绕行）。
本文记录了pdf.js插件使用方式和框架构建过程中遇到的一些问题，主要实现了以文件路径和文件流的方式预览的功能，通过修改源码对预览页面下载、打印按钮可操作性进行了控制，同时在预览界面添加了关闭按钮。

1. 下载PDF插件源码
下载地址：GitHub: https://github.com/mozilla/pdf.js/
build\generic\web目录中文件是构建所需的
启动运行http://localhost:8080/generic/web/viewer.html
可以看到如下界面：
这里写图片描述

2. 与实际项目配合使用时的框架构建过程
我用的是.NET结构，在plugins目录下新建了pdf目录，将所需的文件考到pdf目录中。
结构如下：
这里写图片描述
注意修改引用文件的路径：
viewer.html文件中：

  <link rel="stylesheet" href="viewer.css" />
  <link rel="resource" type="application/l10n" href="locale/locale.txt" /> //中英文转换相关
  <script src="l10n.js"></script>
  <script src="pdf.js"></script>
  <script src="viewer.js"></script>

3. 已知或者能够获取到文件路径，采用以下方式调用该插件进行预览：

//在js中调用下面代码，filePath为文件路径
window.location.href = "../../../plugins/pdf/viewer.html?file=" + filePath;

4. 如果获取到的是流文件，采用以下方式预览

//在js中调用下面代码，filePath为文件路径
window.location.href = "../../../plugins/pdf/viewer.html?file=" + encodeURIComponent(global.serverIP + "/api/files/FileView?filePath=" + filePath) ;

global.serverIP + "/api/files/FileView?filePath=" + filePath：指的是根据文件路径去服务端获取流文件。
这里说明一下为什么有文件路径还需去获取流文件，因为有时候需要对文件进行加密存储，加密后根据路径下载到的文件是乱码的，所以需要去服务端获取解密后的流文件。
由于一个url中不能出现两个？号，所以需要用到js中的encodeURIComponent()来进行编码，然后viewer.js里会自动对编码的内容进行解码，函数如下：
这里写图片描述
服务端返回流文件的方式如下：

        /// <summary>
        /// 文件预览
        /// </summary>
        /// <param name="filePath">文件路径</param>
        /// <returns></returns>
        [HttpGet]
        public HttpResponseMessage FileView([FromUri] string filePath)
        {
            //定义响应信息
            HttpResponseMessage response = new HttpResponseMessage();
            Stream stream = null;
            try
            {
                var path = System.Web.HttpContext.Current.Server.MapPath(filePath);
                bool result = FileOperate.FileDownload(path, out stream);
                if (result)
                {
                    // 获取对应文件后缀名
                    string fileExt = filePath.Substring(filePath.LastIndexOf('.') + 1);
                    //根据文件类型，设置http相应中Content-Type内容标头值
                    string contentType = "application/" + fileExt;
                    //获取文件原名
                    string fileName = "666.pdf";
                    response = new HttpResponseMessage(HttpStatusCode.OK);
                    //流文件内容
                    response.Content = new StreamContent(stream);
                    //流文件类型
                    response.Content.Headers.ContentType = new MediaTypeHeaderValue(contentType);
                    //指定文件名
                    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline")
                    {
                        FileName = fileName
                    };
                    return response;
                }
                else
                {
                    //表明未获取到数据
                    return new HttpResponseMessage(HttpStatusCode.NoContent);
                }
            }
            catch (Exception ex)
            {
                log.Error("FileView()", ex);
                //表明未获取到数据
                response = new HttpResponseMessage(HttpStatusCode.NoContent);
                return response;
            }
        }

5.页面中按钮显示英文不显示中文解决方案
我遇到英文没有被翻译为中文的原因是：
下载的源码中翻译相关的文件后缀为.properties，在.net环境中好像识别不了，直接将后缀改为.txt 就可以正常显示中文了。修改后如下：
这里写图片描述
6. 修改源代码，对打印、下载按钮进行控制
因为在实际中有的文件只能预览，不能进行打印、下载操作，所以需要对这两个按钮可操作性进行控制。
在viewer.html页面大概第155~160行找到打印、下载相关控件信息如下，获取到控件id：
这里写图片描述
在viewer.js页面5463行添加下图红框中的代码

这里是在调用时添加了控制打印下载的标志参数downloadFlag：值为true时允许下载打印；false时不允许，
在js中调用时添加downloadFlag参数，调用方式如下：

 //获取流文件的方式预览加密文件
 window.location.href = "../../../plugins/pdf/viewer.html?file=" + encodeURIComponent(global.serverIP + "/api/files/FileView?filePath=" + filePath) + "&downloadFlag=" + downloadFlag;
//获取文件地址的方式预览普通文件
 window.location.href = "../../../plugins/pdf/viewer.html?file=" + filePath+ "&downloadFlag=" + downloadFlag;

downloadFlag设为false时，按钮变为灰色不可用，效果如下：
这里写图片描述
7. 修改源代码，在预览页面添加关闭按钮
在viewer.html页面新增关闭按钮，代码如下：

<button id="closeThisPage" class="toolbarButton" style="width:40px;" title="关闭预览" onclick="CloseThisPage()">关闭</button>

在viewer.js页面添加关闭按钮事件：

//关闭预览按钮事件
function CloseThisPage() {    
    window.history.back(-1);
}

效果图如下：
这里写图片描述

参考博客地址：
http://www.cnblogs.com/kagome2014/p/kagome2014001.html

PDF.js使用总结

PDF.js使用总结

猜你喜欢