pdf 下载，显示 ios 和 android

Question

目前我在混合应用程序中工作。我收到了 base 64 字符串，我想将其下载为 pdf 并在用户单击下载按钮时打开它。我设法参考以下内容转换为 pdf link 它被存储在设备的本地存储中。 android 文件存储在内部 storage.But 中，因为 ios pdf 无法在本地存储中访问，并且 ibooks 无法识别该文件。如何在 android 的下载文件夹和 ios 的 ibooks 中提供 pdf 以获得更好的用户体验，并在下载完成后打开 pdf？

function b64toBlob(b64Data, contentType, sliceSize) {
var input = b64Data.replace(/\s/g, ''),
    byteCharacters = atob(input),
    byteArrays = [],
    offset, slice, byteNumbers, i, byteArray, blob;

contentType = contentType || '';
sliceSize = sliceSize || 512;

for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    slice = byteCharacters.slice(offset, offset + sliceSize);

    byteNumbers = new Array(slice.length);
    for (i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
    }

    byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
}

//Convert to blob. 
try {
    blob = new Blob(byteArrays, { type: contentType });
}
catch (e) {
    // TypeError old chrome, FF and Android browser
    window.BlobBuilder = window.BlobBuilder ||
                         window.WebKitBlobBuilder ||
                         window.MozBlobBuilder ||
                         window.MSBlobBuilder;
    if (e.name == 'TypeError' && window.BlobBuilder) {
        var bb = new BlobBuilder();
        for (offset = 0; offset < byteArrays.length; offset += 1) {
            bb.append(byteArrays[offset].buffer);
        }                    
        blob = bb.getBlob(contentType);
    }
    else if (e.name == "InvalidStateError") {
        blob = new Blob(byteArrays, {
            type: contentType
        });
    }
    else {
        return null;
    }
}

 return blob;
};

然后下载本身我们需要 cordova-file 插件：

 function pdfConversion(){
  alert("The paragraph was clicked.");
var fileName="test.pdf";
var fileToSave= b64toBlob(encodedString, 'application/pdf');
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS,    onFileSystemFail);
}
function gotFS(fileSystem) {
    fileSystem.root.getFile(fileName, {create: true}, onFileEntryRetrieved, onFileSystemFail);
}

function onFileEntryRetrieved(fileEntry) {
    console.log("file entry retrieved");
    fileEntry.createWriter(gotFileWriter, onFileSystemFail);
}
   function gotFileWriter (writer) {
      console.log("inside local file system"+JSON.stringify(writer));
      alert("JSON.stringify(writer)"+JSON.stringify(writer));
      console.log("contents of file now 'some sample text'");
        //writer.truncate(11);  
        writer.onwriteend = function(evt) {
            writer.write(fileToSave);
             writer.seek(4);
            }

  writer.onerror = function (e) {
      // you could hook this up with our global error handler, or pass in an error callback
      console.log('Write failed: ' + e.toString());
  };
  writer.write(fileToSave);
  window.open(fileName, '_blank');

   };

   function onFileSystemFail(error) {
        console.log(error.code);
    }

};

Answer 1

在Android，我们可以读写PDF。但在IOS中，Sandbox访问对读取有一定的限制。

我设法使用如下编码字符串打开 PDF

window.open("data:application/pdf;base64,"+encodedString, "_blank","location=no,hidden=no,closebuttoncaption=Close");

pdf 下载，显示 ios 和 android

pdf download ,display for ios and android

pdf

android

ios

cordova

hybrid-mobile-app