Javascript 如何使用PDF.js显示PDF（存储在base64中）中的所有页面？_Javascript_C#_Html_Asp.net Mvc_Pdf.js

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

javascript c# html asp.net-mvc

Javascript 如何使用PDF.js显示PDF（存储在base64中）中的所有页面？,javascript,c#,html,asp.net-mvc,pdf.js,Javascript,C#,Html,Asp.net Mvc,Pdf.js,我使用以下脚本使用PDF.js显示PDF，但它不会在画布上显示任何内容。你能告诉我这件事哪里出了问题吗？我试图在网上查找文档，但找不到任何帮助 @Model.B是base64字符串 <script> var pdfData = atob("@Model.B"); var pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc =

我使用以下脚本使用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>


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）（函数（pdf）{
thePdf=pdf；
viewer=document.getElementById（'pdfData'）；
用于（第1页；第C页模型）
@Html.ValidationMessageFor（model=>model.C，”，新{@class=“formtext”，style=“color:rgb（184,10,10）；字体大小：12px；”）
提交

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


函数Base64ToInt8Array（base64）{
var raw=atob（base64）；
var uint8Array=新uint8Array（原始长度）；
对于（变量i=0；i


下面是另一个不使用viewer.html的示例：
任何错误（在开发控制台上）？您可以检查页面并确定是否实际创建了画布元素吗？不，画布元素没有创建。而且，当我调试它时，代码从未进入脚本中的var pdfjsLib声明行。似乎第一行代码抛出了一个错误。顺便问一下-您确定没有丢失剃须刀块吗？JS现在没有@Model.B
之前我尝试了相同的代码，没有使用for循环来显示第一页，效果非常好。我指的是这里显示的示例：我认为最好用console.log（pdf）替换循环语句，检查调试器/dev控制台中的值并从那里继续
    <!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>