pdf.js 2.5版本开发,网上搜的大多是1.x版本的写法,查看了列子 只有 加载1页的方法,没有加载全部的列子,思路就是写个循环把每一页都加载到动态创建的canvas里。
下面是加载所有页PDF,JQUERY 请自行引用
按照1.x版本的写法 但是引用的是2.x版本的回报 jsPDF is not defined 错。
先下载 pdf.js pdf.work.js 下载地址 https://github.com/mozilla/pdf.js
//引用
<script src="../../Scripts/jspdf/pdf.min.js"></script>
//html
<div id="pdfDiv" style="margin:48px 3px 0px 3px">
</div>
//js
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = '/Scripts/jspdf/pdf.worker.min.js';
//
// Asynchronous download PDF
//
var url ='aaa.pdf';
var loadingTask = pdfjsLib.getDocument(url);
//如遇到中文不显示,需要引入 cmaps
//var CMAP_URL = 'Scripts/jspdf/cmaps/';
// var loadingTask = pdfjsLib.getDocument({
// url: url, //
// cMapUrl: CMAP_URL,
// cMapPacked: true
// })
loadingTask.promise.then(function (pdf) {
pdfDoc = pdf;
//
// Fetch the first page
//
for (var i = 0; i < pdfDoc.numPages; i++) {
pdf.getPage(i + 1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
//
// Prepare canvas using PDF page dimensions
//
var canvas = $('<canvas style="direction: ltr; border: 0px solid black; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); "></canvas>');
$("#pdfDiv").append(canvas);
var context = canvas[0].getContext('2d');
canvas[0].height = viewport.height;
canvas[0].width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext);
});
}
</script>
如要引入 cmaps 需在 web.config 里引入
<!--<system.webServer>
<staticContent>
<mimeMap fileExtension=".apk" mimeType="application/vnd.android.package-archive" />
<mimeMap fileExtension=".properties" mimeType="text/x-java-properties" />
<mimeMap fileExtension=".bcmap" mimeType="image/svg+xml" />
</staticContent>
</system.webServer> -->