Question

我正在尝试将PDF加载到数组中，然后再将其重新输出。我刚收到错误＆＃34;无法加载PDF文档＆＃34;

我尝试过使用readAsArrayBuffer和readAsBinaryString。我还试图在没有任何锁定的情况下转换为Uint8Array。

看了

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>

Answer 1

just use edited codes

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

and also another code not array just for help

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

Javascript / Jquery Blob未显示Chrome PDF

1 个答案: