Показать PDF в Android/iOS App

Question

Я загрузил PDF-файл как Base64 String в свой телефон, как описано в этом SO Thread, но я не получаю, как я могу отобразить его в реальном PDF-формате, чтобы его можно было увидеть конечным пользователем? Я написал следующий код для записи в файл:

var tempResponse = null; 
function downloadFileOK(response){ 
var invocationResult = response['invocationResult']; 
     tempResponse = invocationResult; 
     var size = parseInt(invocationResult["responseHeaders"]["Content-Length"]);  
     window.requestFileSystem(LocalFileSystem.PERSISTENT, size, onSuccessFileHandler, onErrorFileHandler); 
} 

//Success 
function onSuccessFileHandler(fileSystem) { 
    alert("inside onSuccessFileHandler START"); 
    fileSystem.root.getFile("test2.pdf", {create: true, exclusive: false}, fileWriter, fail); 
    alert("inside onSuccessHandler END"); 
} 

// Failure 
function onErrorFileHandler(error) { 
    alert("inside onErrorFileHandler"); 
} 

function fileWriter(entry){ 
    alert("inside fileWriter START"); 

    entry.createWriter(function(writer){ 
     writer.onwriteend = function(evt) { 
      console.log("done written pdf :: test1.pdf"); 
      alert("Inside onwriteend : START"); 
     }; 

     var temp = atob(tempResponse["text"]); 
     alert(temp); 

     writer.write(temp); 
    },fail); 

    alert("inside fileWriter END"); 
} 

function fail(error) { 
    alert("inside fail"); 
    console.log(error.code); 
} 

Я делаю это неправильно? Как открыть PDF из моего приложения в ОС iOS/Android с помощью javascript/jquery/cordova?

Answer 1

После того как вы загрузили файл с кодировкой base64, вы должны его декодировать и сохранить в файловой системе, чтобы его можно было просмотреть позже. Вы не должны сохранять базу в кодировке base64.

Вы можете использовать функцию утилиты ниже, чтобы выполнить это. Кстати, вы должны взглянуть на предыдущий ответ на Download PDF file from through MobileFirst Adapter, так как я сделал обновление для него, он не кодировал PDF правильно.

var AppUtils = (function(){ 

    // get the application directory. in this case only checking for Android and iOS 
    function localFilePath(filename) { 
     if(device.platform.toLowerCase() === 'android') { 
      return cordova.file.externalDataDirectory + filename; 
     } else if(device.platform.toLowerCase() == 'ios') { 
      return cordova.file.dataDirectory + filename; 
     } 
    } 

    // FileWritter class 
    function FileWritter(filename) { 
     this.fileName = filename; 
     this.filePath = localFilePath(filename); 
    } 

    // decode base64 encoded data and save it to file 
    FileWritter.prototype.saveBase64ToBinary = function(data, ok, fail) { 
     var byteData = atob(data); 

     var byteArray = new Array(byteData.length); 

     for (var i = 0; i < byteData.length; i++) { 
      byteArray[i] = byteData.charCodeAt(i); 
     } 

     var binaryData = (new Uint8Array(byteArray)).buffer; 

     this.saveFile(binaryData, ok, fail); 
    } 

    // save file to storage using cordova 
    FileWritter.prototype.saveFile = function(data, ok, fail) { 
     this.fileData = data; 

     var path = this.filePath.substring(0, this.filePath.lastIndexOf('/')); 

     var that = this; 

     // Write file on local system 
     window.resolveLocalFileSystemURL(path, function(directoryEntry) { 
      var options = {create: true, exclusive: false}; 

      directoryEntry.getFile(that.fileName, options, function(file) { 
       file.createWriter(function(writer) { 
        writer.onwriteend = function(event) { 
         if(typeof ok === 'function') { 
          ok(event); 
         } 
        }; 

        writer.write(that.fileData); 
       }, fail); 
      }, fail); 

     }, fail); 
    }; 

    // open InApp Browser to view file 
    function viewFile(filename) { 
     var path = localFilePath(filename); 

     window.open(path, "_blank", "location=yes,hidden=no,closebuttoncaption=Close"); 
    } 

    return { 
     FileWritter: FileWritter, 
     localFilePath: localFilePath, 
     viewFile: viewFile 
    } 
})(); 

Ваш downloadFileOK должен выглядеть следующим образом:

function downloadFileOK(response){ 
    var pdfData = response['invocationResult']['text']; 

    var fileWritter = new AppUtils.FileWritter('YOUR-PDF-NAME.pdf'); 

    fileWritter.saveBase64ToBinary(pdfData, function(r){ 
     // file was saved 
    }, function(e){ 
     // error file was not saved 
    }); 
} 

Если вы хотите открыть файл, то вы можете использовать AppUtils.viewFile('YOUR-FILE-NAME.pdf')