我使用以下脚本使用PDF.js显示PDF，但它在画布上没有显示任何内容。你能告诉我这个哪里不对吗？我试着在网上查找文档，但找不到任何帮助。
@模型。B是base64字符串。
<script>
var pdfData = atob("@Model.B");
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument({ data: pdfData });
loadingTask.getDocument(pdfData).promise.then(function (pdf) {
thePdf = pdf;
viewer = document.getElementById('pdfData');
for (page = 1; page <= pdf.numPages; page++) {
canvas = document.createElement("canvas");
canvas.className = 'pdf-page-canvas';
viewer.appendChild(canvas);
renderPage(page, canvas);
}
});
function renderPage(pageNumber, canvas) {
thePdf.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport });
});
}
</script>
下面是div。我使用embed标记来查看PDF数据是否正确。
<div class="form-inline" style="margin-left:130px; margin-top:20px; display:none" id="pdfData" role="group" aria-label="Basic example">
<embed src="data:application/pdf;base64,@Model.B" style="height: 750px; width: 1000px;" alt="pdf" type="application/pdf"/>
@ViewBag.Error
<div class="form-group row" style="margin-top: 20px; margin-left: 25px">
Accept Policy
<div class="col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-0" , style="text-align:justify; margin-top: 20px;">
@Html.CheckBoxFor(model => model.C)
@Html.ValidationMessageFor(model => model.C, "", new { @class = "form-text", style = "color:rgb(184, 10, 10); font-size:12px;" })
</div>
<div class="form-inline" role="group" aria-label="Basic example">
<button type="submit" class="btn btn-default btn-sm" id="submit_Agreement" name="submit_Agreement" title="Agree to Policy" onclick="">
Submit
</button>
</div>
</div>
</div>
这是一个使用PDF.js.中的viewer.html的解决方案
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="./pdfjs-dist/build/pdf.js"></script>
</head>
<body>
<iframe id="pdfFrame" style="width:900px;height:1000px;"></iframe>
<script>
function base64ToUint8Array(base64) {
var raw = atob(base64);
var uint8Array = new Uint8Array(raw.length);
for (var i = 0; i < raw.length; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return uint8Array;
}
var pdfData = base64ToUint8Array("JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G");
var pdfViewerFrame = document.getElementById("pdfFrame");
pdfViewerFrame.onload = function() {
pdfViewerFrame.contentWindow.PDFViewerApplication.open(pdfData);
}
pdfViewerFrame.setAttribute("src","./pdfjs-dist/web/viewer.html?file=");
</script>
</body>
</html>
下面是另一个不使用viewer.html的示例：https://jsfiddle.net/pdfjs/cq0asLqz/