Javascript/Jquery Blob not showing Chrome PDF

我正在尝试将PDF加载到数组中，然后再次将其输出。我刚刚收到错误"加载PDF文档失败"

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

已查看

javascript二进制字符串的Blob

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>

只需使用经过编辑的代码

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

相关内容

最新更新

热门标签：