效果如图，可显示多页pdf，可显示签章，在移动设备也一样
Document
.lightbox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
}
.pop{
position: absolute;
left: 50%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
function showPdf()
{
var container = document.getElementById("container");
var url= UrlParm.parm("pdfpath");
PDFJS.workerSrc = '../build/pdf.worker.js';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
for (var i = 1; i < pdf.numPages+1; i++) {
pdf.getPage(i).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// 这里拿body当pdf容器
document.body.appendChild(canvas);
page.render({ canvasContext: context, viewport: viewport });
});
}
});
}
自己定了一个页面，这里用到了pdf.worker.js，网上的另一种方式是直接调用谷歌的viewer.html。但是没用用到pdf.worker.js所以你去编辑pdf.worker.js也没用，签章还是不会出来var url= UrlParm.parm("pdfpath");
这里用了getUrlParam.js
所以调用页面的时候也跟viewer.html一样
localtion.href = 'pdfviewer.html?pdfpath=' + url就行了
附上pdf.js和已经修改好的pdf.worker.js
下图是pdf.worker.js显示签章部分
