如何使用 PDF.js 显示 PDF 中的所有页面（存储在 base64 中）？答案

【问题标题】：How do I display all pages in a PDF (stored in base64) using PDF.js?如何使用 PDF.js 显示 PDF 中的所有页面（存储在 base64 中）？
【发布时间】：2019-04-02 08:42:36
【问题描述】：

我正在使用以下脚本通过 PDF.js 显示 PDF，但它没有在画布上显示任何内容。你能告诉我我哪里错了吗？我尝试在线查找文档，但找不到任何帮助。

@Model.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>

【问题讨论】：

任何错误（在开发控制台上）？您能否检查页面并确定是否实际创建了画布元素？
不，没有创建画布元素。另外，当我调试它时，代码永远不会进入脚本中的 var pdfjsLib 声明行。
似乎第一行代码抛出了错误。顺便说一句 - 你确定你没有错过剃须刀块吗？ JS 现在不知道@Model.B背后的价值是什么
我之前尝试了相同的代码，但没有使用 for 循环来显示第一页，它工作得非常好。我指的是此处显示的示例：mozilla.github.io/pdf.js/examples
我认为最好用console.log(pdf) 语句替换循环，检查调试器/开发控制台中的值并从那里继续

标签： javascript c# html asp.net-mvc pdf.js

【解决方案1】：

这是使用 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/

【讨论】：