Phonegap/Cordova: Plugin for displaying PDFs and providing function for Linkhandler (iOS / Android)

Question

I’m looking for a plug-in for my Phonegap app that allows me to display remote PDF files within my app. I found a couple of dated questions and I was wondering if there are any new solutions in 2018.

My needs:

• Displaying a PDF to the user
• iOS and Android
• Primarily phone but also tablets
• Pinch (Zoom-in, Zoom-out)
• Link-Handler: I have custom URI’s within the PDFs which I have to handle within the app. The links represents navigation logic within the app itself. No need to open an external source / browser / etc.
• I only display a single page within the PDF
• The PDFs are created by myself

I found a couple of plugins on Github but nothing really fits. Either the plugins are dated and buggy or primarily for tablet.

I currently have a PDF.js solution. However the pinch support is not working properly.

Based on what I've read, I'm considering the cordova-plugin-inappbrowser but not sure if it works on iOS and Android. Plus, I'm not sure about the Link handler part.

Any ideas? Highly appreciated.

Thanks in advance.

Answer 1

I had the same problem and indeed no plugin allows to display a PDF correctly.

So I did things differently: I download the PDF locally and then I ask the operating system to open the PDF with its default application. This way, the PDF application takes over and this application normally contains everything we may need.

To make the request to open the file I used the file opener 2 plugin: https://github.com/pwlin/cordova-plugin-file-opener2.

And here is my code:

        var me = this;
        var directory = null;
        // Request permission to store a file
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
            // The URL defined by cordova according to the operating system
            directory = fs.root.nativeURL;

            // Creating a temporary file in this memory area
            fs.root.getFile(fileName, {
                create: true,
                exclusive: false
            }, function(fileEntry) {
                // Opening a channel to write to this file
                fileEntry.createWriter(function(fileWriter) {
                    var sliceSize = 1024;
                    var byteCharacters = atob(me.cordovaBinaryValue);
                    var bytesLength = byteCharacters.length;
                    var slicesCount = Math.ceil(bytesLength / sliceSize);
                    var byteArrays = new Array(slicesCount);
                    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
                        var begin = sliceIndex * sliceSize;
                        var end = Math.min(begin + sliceSize, bytesLength);

                        var bytes = new Array(end - begin);
                        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
                            bytes[i] = byteCharacters[offset].charCodeAt(0);
                        }
                        byteArrays[sliceIndex] = new Uint8Array(bytes);
                    }

                    // Creating our binary PDF structure object
                    var binaryData = new Blob(byteArrays, {
                        type: 'application/pdf'
                    });

                    // Write the content in the pdf file
                    fileWriter.write(binaryData);

                    fileWriter.onwriteend = function(e) {
                        // Now that the file is locally registered, you have to open it with the OS
                        cordova.plugins.fileOpener2.open(
                        directory + fileName, 'application/pdf', {
                            error: function(e) {
                                alert('Error status: ' + e.status + ' - Error message: ' + e.message);
                            },
                            success: function() {
                             // Normally we have nothing to do here since it is the moment when the pdf opens
                            }
                        });
                    };

                    // Write error in the file
                    fileWriter.onerror = function(e) {
                        alert('Write failed: ' + e.toString());
                    };
                });
            },
            function(err) {
                alert('error getting file! ' + err);
            });
        },
        // No writing permission
        function(err) {
            alert('error getting persistent fs! ' + err);
        });

I hope that could help you.