如何使用PDF.js显示PDF(存储在base64中)中的所有页面? [英] How do I display all pages in a PDF (stored in base64) using PDF.js?
本文介绍了如何使用PDF.js显示PDF(存储在base64中)中的所有页面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用以下脚本通过PDF.js显示PDF，但是在画布上没有显示任何内容.你能告诉我我要怎么做吗?我尝试在线查找文档，但找不到任何帮助.
I am using the following script to display a PDF using PDF.js, but it does not show anything on the canvas. Can you tell me where I am going wrong with this? I tried looking for documentation online, but could not find any help.
@ Model.B是base64字符串.
@Model.B is the base64 string.
<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数据是否正确.
The following is the div. I used the embed tag to see if the PDF data was correct or not.
<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的解决方案.
This is a solution using the viewer.html from PDF.js.
<!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/
And here is another example without using viewer.html: https://jsfiddle.net/pdfjs/cq0asLqz/
这篇关于如何使用PDF.js显示PDF(存储在base64中)中的所有页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
