C#通过pdf.js实现pdf⽂件预览、翻页及打印等功能
⽬录
1、背景说明
有时需要将PDF⽂件在浏览器上显⽰，并进⾏相应的操作。经查询此类需求可通过pdf.js插件完成。最近了点资料，研究下了pdf.js，并实现了pdf⽂件的预览、打印功能
2、效果展⽰
具体实现的效果如图所⽰。
总体界⾯如上图所⽰。其中菜单标红的1、2、3分别具体的实现⽅式。
在翻页及打印的具体实现中，实现了翻页功能及打印功能。打印功能截图如下。
3、具体实现
3.1 环境说明
IDE：VS2019社区版
操作系统：Win10专业版
部署：IIS
架构：ASP.NET MVC5
3.2 外部资源
接口测试视频在实现中使⽤jQuery、pdf.js和jQuery.print.js等。可通过github中搜索及下载相关⽂件。
3.3 具体实现
PDF⽂件可通过两种⽅式实现。直接使⽤viewer.html和使⽤pdf.js。其中前者特别简单。下⾯分别说明
3.3.1 viewer.html⽅式实现
3.3.1.1 具体代码
pdf下载下来后，⽂档结构图如图所⽰。
可直接通过"/MyViewPDF/Scripts/pdf/web/viewer.html?file=" + fileUrl；实现PDF的预览及展⽰功能。效果如下图
具体代码如下：
（1）html中的代码如下：
<h2 id="mytitle">通过View.html的Url加载PDF</h2>
<button id="loadBtn">加载</button>
<iframe id="showpdfframe" src="" ></iframe>
（2）js端的代码
//加载PDF按钮
$("#loadBtn").click(
function (){
//获取路径（需要根据实际业务场景，获取⽂件的路径）
var fileUrl =encodeURIComponent("/MyViewPDF/App_Data/test.pdf");
//整合路径
var url ="/MyViewPDF/Scripts/pdf/web/viewer.html?file="+ fileUrl;
//展⽰
$("#showpdfframe").attr("src", url);
}
);
通过在⾃⼰的界⾯中iframe标签，将viewer.html加载到其中，实现PDF的预览及各项功能
3.3.1.2 viewer.html源码
通过viewer.js的初始化⽅法webViewerInitialized定义如下：
jquery下载文件请求function webViewerInitialized(){
var appConfig = PDFViewerApplication.appConfig;
var file;
var queryString = document.location.search.substring(1);
var params=(0, _ui_utils.parseQueryString)(queryString);
file ="file"in params?params.file : _app_("defaultUrl");//这句是重点******* validateFileURL(file);
var fileInput = ateElement("input");
fileInput.id = appConfig.openFileInputName;
画图边框图片大全简约fileInput.className ="fileInput";
fileInput.setAttribute("type","file");
document.body.appendChild(fileInput);
defaultUrl:{
value:"acemonkey-pldi-09.pdf",
kind: OptionKind.VIEWER
},
所以在⽹上其他例⼦中，有些⼈是⽤URL后⾯跟file参数，有些是通过对defaultUrl参数重新赋值实现。
3.3.2 pdf.js实现
另外⼀种⽅式是通过pdf.js实现。具体过程如下
3.3.2.1 具体代码
前端html代码如下sql语句不包含
<h4>加载PDF指定页⾯</h4>
<p><button id="loadPdfBtn">加载PDF⽂件</button></p>
<p>
<canvas id="the-canvas" ></canvas>
</p>
前端的js代码如下
//加载PDF按钮
$("#loadPdfBtn").click(
function (){
/
/发起ajax请求，请求获取PDF的⽂件流
$.ajax({
async:false,
type:'POST',
url:"/MyViewPDF/ViewPDF/getPdfStream",
data:{
"args":""//可带参数请求
},
success: function (rJson){
var rObj = $.parseJSON(rJson);
if(rObj.success ==="true"){
var pdfData =atob(rObj.data);
pdfjsLib.GlobalWorkerOptions.workerSrc ='/MyViewPDF/Scripts/pdf/build/pdf.worker.js';//⾃⼰的路径
var loadingTask = Document({
data: pdfData
});
loadingTask.promise.then(function (pdf){
//加载指定界⾯（第⼀页）
var scale =1.2;
var viewport = Viewport({ scale: scale });
var canvas = ElementById('the-canvas');
var context = Context('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext ={
canvasContext: context,
viewport: viewport,
};
});
});
}else{
ssage);
}
}
java安装未完成错误1603});//ajax结束
}
);
实现思路：将后台的PDF⽂件转为⽂件流，pdf.js收到⽂件流后，将⽂件流传给画布（canvas）标签。通过canvas标签展⽰内容。
3.3.2.2 源码解读
以上js代码中有⼀个⽅法：Document。这个⽅法很重要。在上⾯的代码中，是将
{
data: pdfData
}
作为参数，传给了getDocument⽅法，但getDocument⽅法，不仅仅可以接受这⼀种参数。还可以接受其他类型的参数。其在pdf.js中的源码如下：
function getDocument(src){
var task =new PDFDocumentLoadingTask();三角函数正切公式
var source;
if(typeof src ==="string"){//第⼀种参数
source ={
url: src
};
}else if((0, _util.isArrayBuffer)(src)){//第⼆种参数
source ={
data: src
};
}else if(src instanceof PDFDataRangeTransport){//第三种参数
source ={
range: src
};
}
...//省略部分代码
}
也就说getDocument可以接受多种类型的参数，因此⼤家可能在⽹上到的其他资料，参数会不同，有些⽤url、有些⽤data的3.4 免费源码
以上全部源码，下载地址为: 提取码：NHZL
3.5 其他说明
若运⾏⼯程代码后，点击“URL加载PDF”按钮后⽆法加载、⽆法展⽰，或出现如下异常
请在IIS的⽹站的请求筛选中，删除APP_Data配置。操作如下图所⽰。原因是IIS过滤掉了部分节点。
4、总结
pdf.js还是⾮常好⽤的。特别是直接使⽤viewer.html⽅式。
以上
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论