在iphone chrome浏览器中无法使用BLOB对象下载文件 [英] File not downloading with BLOB object in iphone chrome browser

问题描述

我正在尝试使用ajax调用从服务器（jsp）下载pdf文件，我从服务器获取Base 64格式的数据，然后将其转换为ArrayBuffer然后使用blob对象下载，下面的代码工作正常除了iphone的浏览器之外的所有浏览器，即使在iphone的safari中，它工作正常，我不知道这个问题是否有任何帮助将非常感谢

I am trying to download the pdf file from server (jsp) using ajax call ,I am getting data in Base 64 format from server ,then converting it into ArrayBuffer and then downloading it with blob object ,below code is working fine for every browser except chrome in iphones even in safari for iphones it is working fine,I don't know whats the issue any help regarding that will be really appreciated

function hello(id)
    {
    //alert(id);

    //alert(id);
    var ln="en";
                $.ajax({
                  type:'post',
                 url:'ajaxurl',
                  data:{lang:ln,num_srno:id},
                  success:function(data){
                  //alert(data);

                /*  var bytes = new Uint8Array(data); // pass your byte response to this constructor

    var blob=new Blob([bytes], {type: "application/pdf"});// change resultByte to bytes

    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.pdf";
    link.click();*/
    var sampleArr = base64ToArrayBuffer(data);
    saveByteArray("Sample Report", sampleArr);

                      }

                    });
    }

    function base64ToArrayBuffer(base64) {
        var binaryString = window.atob(base64);
        var binaryLen = binaryString.length;
        var bytes = new Uint8Array(binaryLen);
        for (var i = 0; i < binaryLen; i++) {
           var ascii = binaryString.charCodeAt(i);
           bytes[i] = ascii;
        }
        return bytes;
     }
    function saveByteArray(reportName, byte) {
        var blob = new Blob([byte], {type: "application/pdf"});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        //link.href=window.webkitURL.createObjectURL(blob);
        //a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
        var fileName = reportName;
        link.download = fileName.substr(fileName.lastIndexOf('/') + 1);
        document.body.appendChild(link);
     link.click();
    document.body.removeChild(link);

    };

推荐答案

结合上面的Mose Answer，你可以检测到os键入并设置相应的代码以便下载

Combining with Mose Answer's above ,you can detect the os type and set your code accordingly to download

   function hello(id)
    {

    //alert(id);

    //alert(id);
    var ln="en";
                $.ajax({
                  type:'post',
                 url:'ajaxurl',
                  data:{lang:ln,num_srno:id},
                  success:function(data){
                  //alert(data);

                /*  var bytes = new Uint8Array(data); // pass your byte response to this constructor

    var blob=new Blob([bytes], {type: "application/pdf"});// change resultByte to bytes

    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.pdf";
    link.click();*/
    var sampleArr = base64ToArrayBuffer(data);
    saveByteArray("Sample Report", sampleArr);

                      }

                    });
    }

    function base64ToArrayBuffer(base64) {
        var binaryString = window.atob(base64);
        var binaryLen = binaryString.length;
        var bytes = new Uint8Array(binaryLen);
        for (var i = 0; i < binaryLen; i++) {
           var ascii = binaryString.charCodeAt(i);
           bytes[i] = ascii;
        }
        return bytes;
     }

     function getMobileOperatingSystem() {
      var userAgent = navigator.userAgent || navigator.vendor || window.opera;

          // Windows Phone must come first because its UA also contains "Android"
        if (/windows phone/i.test(userAgent)) {
            return "Windows Phone";
        }

        if (/android/i.test(userAgent)) {
            return "Android";
        }

        // iOS detection from: http://stackoverflow.com/a/9039885/177710
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return "iOS";
        }

        return "unknown";
    }



    function saveByteArray(reportName, byte) {
        //
        var os=getMobileOperatingSystem();

        if(os=="iOS")
        {
            var reader = new FileReader();
    var out = new Blob([byte], {type: "application/pdf"});
    reader.onload = function(e){
      window.location.href = reader.result;
    }
    reader.readAsDataURL(out);
        }


        else {

            var blob = new Blob([byte], {type: "application/pdf"});
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            //link.href=window.webkitURL.createObjectURL(blob);
            //a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
            var fileName = reportName;
            link.download = fileName.substr(fileName.lastIndexOf('/') + 1);
            document.body.appendChild(link);
         link.click();
        document.body.removeChild(link);
    }

   };

我希望它有所帮助。

这篇关于在iphone chrome浏览器中无法使用BLOB对象下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！