pdf下载，ios和android显示

Posted 2023-03-15

【中文标题】pdf下载，ios和android显示

【英文标题】：pdf download ,display for ios and android

【发布时间】：2016-07-31 23:27:17

【问题描述】：

目前我正在研究混合应用程序。我收到了 base 64 字符串，我想将其下载为 pdf 并在用户单击下载按钮时打开它。我设法转换为 pdf 参考下面的链接 它被存储在设备的本地存储中。 在 android 文件中存储在内部存储中。但是对于 ios pdf 无法在本地存储中访问，并且 ibooks 无法识别文件。如何使 pdf 在 android 和 ibooks for ios 的下载文件夹中可用以获得更好的用户体验并在下载完成后打开 pdf？。

convert base 64 to pdf blob

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);
    

;

【问题讨论】：

在android中，我们可以读写Pdf。但在 IOS 中，沙盒访问对读取有一定的限制。所以我设法使用编码字符串打开pdf如下 window.open("data:application/pdf;base64,"+encodedString, "_blank", "location=no,hidden=no,closebuttoncaption=Close");

【参考方案1】：

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

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

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