Javascript/Jquery Blob 不显示 Chrome PDF答案

【问题标题】：Javascript/Jquery Blob not showing Chrome PDFJavascript/Jquery Blob 不显示 Chrome PDF
【发布时间】：2016-09-13 08:50:36
【问题描述】：

我正在尝试将 PDF 加载到数组中，然后再次将其输出。我只是收到错误“无法加载 PDF 文档”

我尝试过使用 readAsArrayBuffer 和 readAsBinaryString。我也尝试过不加锁地转换为 Uint8Array。

看过

Blob from javascript binary string

http://www.javascripture.com/Blob

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

仍然没有运气：/

我的代码如下

    <!DOCTYPE html>
    <html>
        <head>
            <script src="/jquery-1.7.1.min.js" type="text/javascript"></script> 
            <script>        
            var $j = jQuery;
              function handleFileSelect() {               
                if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
                  alert('The File APIs are not fully supported in this browser.');
                  return;
                }   

                input = document.getElementById('fileinput');

                if (!input) {
                  alert("Um, couldn't find the fileinput element.");
                }
                else if (!input.files) {
                  alert("This browser doesn't seem to support the `files` property of file inputs.");
                }
                else if (!input.files[0]) {
                  alert("Please select a file before clicking 'Load'");               
                }
                else {
                  file = input.files[0];
                  fr = new FileReader();
                  fr.onload = receivedText;

                  arrayBuffer =  fr.readAsArrayBuffer(file);

                }
              }

             var arrayBuffer;

              function receivedText() {
                document.getElementById('editor').appendChild(document.createTextNode(fr.result));
              }           

             function getFile(){
                    var data = arrayBuffer;
                     var blob = new Blob([data], {type: "application/pdf"});

                    var objectUrl = URL.createObjectURL(blob);
                    window.open(objectUrl);
             }
            </script>
        </head>
        <body>
            <input type="file" id="fileinput"/>
            <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
            <input type='button' value='Get' onclick='getFile();'>
            <div id="editor"></div>
        </body>
    </html>

【问题讨论】：

标签： javascript jquery pdf buffer blob

【解决方案1】：

只使用编辑过的代码

 <!DOCTYPE html>
<html>
    <head>
        <script src="/jquery-1.7.1.min.js" type="text/javascript"></script> 
        <script>  
        var arrayBuffer="";      
        var $j = jQuery;
          function handleFileSelect() {               
            if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
              alert('The File APIs are not fully supported in this browser.');
              return;
            }   

            input = document.getElementById('fileinput');

            if (!input) {
              alert("Um, couldn't find the fileinput element.");
            }
            else if (!input.files) {
              alert("This browser doesn't seem to support the `files` property of file inputs.");
            }
            else if (!input.files[0]) {
              alert("Please select a file before clicking 'Load'");               
            }
            else {
              file = input.files[0];
              fr = new FileReader();
              fr.onload = receivedText;
              arrayBuffer =  fr.readAsBinaryString(file);


            }

          }

        // 

          function receivedText() {
            document.getElementById('editor').appendChild(document.createTextNode(fr.result));
          }           

         function getFile(){

                var data = file;
                 var blob = new Blob([data], {type: "application/pdf"});
                var objectUrl = URL.createObjectURL(blob);
                window.open(objectUrl);
         }
        </script>
    </head>
    <body>
        <input type="file" id="fileinput"/>
        <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
        <input type='button' value='Get' onclick='getFile();'>
        <div id="editor"></div>
    </body>
</html>

还有另一个代码不是数组只是为了帮助

 <!DOCTYPE html>
<html>
    <head>
        <script src="/jquery-1.7.1.min.js" type="text/javascript"></script> 
        <script>  
        var arrayBuffer="";      
        var $j = jQuery;
          function handleFileSelect() {               
            if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
              alert('The File APIs are not fully supported in this browser.');
              return;
            }   

            input = document.getElementById('fileinput');

            if (!input) {
              alert("Um, couldn't find the fileinput element.");
            }
            else if (!input.files) {
              alert("This browser doesn't seem to support the `files` property of file inputs.");
            }
            else if (!input.files[0]) {
              alert("Please select a file before clicking 'Load'");               
            }
            else {
              file = input.files[0];
              fr = new FileReader();
              fr.onload = receivedText;
              arrayBuffer =  fr.readAsDataURL(file);

            }

          }

        // 

          function receivedText() {
            document.getElementById('editor').appendChild(document.createTextNode(fr.result));
          }           

         function getFile(){
          //alert(arrayBuffer);
                var data = document.getElementById('editor').innerHTML;
                alert(data);
                 var blob = new Blob([data], {type: "application/pdf"});
                var objectUrl = URL.createObjectURL(blob);
                window.open(data);
         }
        </script>
    </head>
    <body>
        <input type="file" id="fileinput"/>
        <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
        <input type='button' value='Get' onclick='getFile();'>
        <div id="editor"></div>
    </body>
</html>

【讨论】：