在 Android/iOS App 中显示 PDF

Question

如SO Thread 中所述，我已在手机中下载了一个作为 Base64 字符串的 PDF 文件，但我不知道如何将其呈现为实际的 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);
}

我做错了吗？如何在 iOS/Android 操作系统中使用 javascript/jquery/cordova 从我的应用中打开 PDF？

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