Question

对于各种复杂的阅读，我发现我必须在iFrame中显示pdf。我正在使用https://github.com/mozilla/pdf.js上的pdf.js库，该库功能强大且有用。我可以使用该库来选择，加载和显示pdf，如jsfiddle的https://jsfiddle.net/peterrr73/5es3dwkp/latest/所示。一切似乎都很好。

<html lang="en">
<head>
  <title>Test load pdf</title>
  <script type="text/javascript"  src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
   <script type="text/javascript">
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
   </script>
</head>
<body>
<input type="file" id="fileinput" />
<canvas id="canvas"></canvas>
</body>
<script  type="text/javascript">
  document.querySelector('#fileinput').addEventListener('change', function(){
    if(this.files.length===0)
        return;
    // gets first selected file
    var file = this.files[0]; 
    var reader = new FileReader();
    reader.onload = function(e) { 
        //do stuff with it here
        var pdfsrc = e.target.result;
        pdfsrc=pdfsrc.replace("data:application/pdf;base64,", "");
        var pdf1=atob(pdfsrc);
        var loadingTask = pdfjsLib.getDocument({data: pdf1});
        loadingTask.promise.then(function(pdf) {
            pdf.getPage(1).then(function(page) {
                var viewport = page.getViewport({scale: 2});
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                page.render(renderContext);
            });
        }); 
    };
    reader.readAsDataURL(file);
}, false);
</script>
</html>

但是，如果我设置了将pdf加载到iFrame的功能，则会发生奇怪的事情。您可以在https://jsfiddle.net/peterrr73/w4qace81/latest/上看到它。在iFrame中，所有文本-仅文本-都是乱码。

<html lang="en">
<head>
  <title>Test load pdf</title>
  <script type="text/javascript"
    src="https://code.jquery.com/jquery-2.2.3.min.js"
    integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
    crossorigin="anonymous"></script>
   <script type="text/javascript"  src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
   <script type="text/javascript">
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
   </script>
    <script  type="text/javascript">
        function choosePDF() {
             var p4='<input type="file" id="fileinput"/>\
                    <canvas id="canvas"></canvas>';
              $('#pdf').contents().find('body').html(p4);  
              var iframe=document.querySelector('#pdf');
              iframe.contentWindow.document.querySelector('#fileinput').addEventListener('change', function(){ 
                  if(this.files.length===0) return;
                    var file = this.files[0]; 
                    var reader = new FileReader();
                    reader.onload = function(e) { 
                        var pdfsrc = e.target.result;
                        pdfsrc=pdfsrc.replace('data:application/pdf;base64,', '');
                        var pdf1=atob(pdfsrc);
                        var loadingTask = pdfjsLib.getDocument({data: pdf1});
                        loadingTask.promise.then(function(pdf) {
                            pdf.getPage(1).then(function(page) {
                                var viewport = page.getViewport({scale: 2});
                                var canvas =  iframe.contentWindow.document.getElementById('canvas');
                                var context = canvas.getContext('2d');
                                canvas.height = viewport.height;
                                canvas.width = viewport.width;
                                var renderContext = {
                                  canvasContext: context,
                                  viewport: viewport
                                };
                                page.render(renderContext);
                            });
                        }); 
                    };
                    reader.readAsDataURL(file);
                 }, false);
         } 
</script>
</head>
<body>
<div>
 <iframe id="pdf" height="700px" width="500px" onLoad="choosePDF();">
         </iframe>
</div>
</body>
</html>

我希望这与在调用文档和嵌入式iFrame之间传递参数等的方式有关。但是我无法确切知道它是什么。

pdf.js在iFrame中无法正确显示pdf

0 个答案: