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文件中：

//中英文转换相关

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

//在js调用以下代码，filePath是文件路径
window.location.href = "../../../plugins/pdf/viewer.html?file=" + filePath;
如果您得到一个流文件，请按以下方式预览它

//在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编码内容将通过以下功能自动解码：

服务器返回流文件如下：

///

/// 文件预览
///

/// 文件路径
///
[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~160Line发现相关控制信息的打印和下载如下，并获得了控制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="关闭预览" οnclick="CloseThisPage()">关闭
1
在viewer.js页面添加关闭按钮事件：

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

效果图如下：

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

---

作者：jianyuerensheng
来源：CSDN
原文：https://blog.csdn.net/jianyuerensheng/article/details/79570781
版权声明：本文为博主原创文章。转载请附上博客链接！