How do I display all pages in a PDF (stored in base64) using PDF.js?

问题

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 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>

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>

回答1:

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>

And here is another example without using viewer.html: https://jsfiddle.net/pdfjs/cq0asLqz/

来源：https://stackoverflow.com/questions/53045127/how-do-i-display-all-pages-in-a-pdf-stored-in-base64-using-pdf-js

标签

javascript

html

asp.net-mvc

pdf.js