How to Render local pdf files on Ionic


#1

i have been trying to open pdf files on ionic app.
I have tried many cordova fileopener 2 plugin and inappbrowser and none of them worked.

those are the functions i tried , when i test it on browser it gives me error " cordova is not defiened , and when i test it on the emulator or phone , the functions doesn’t work

 $scope.openPDFI = function(){
    
        cordova.plugins.fileOpener2.open(
            'cdvfile://localhost/persistent/pdfs/BT168562.3.pdf', // You can also use a Cordova-style file uri: cdvfile://localhost/persistent/Download/starwars.pdf
        'application/pdf', 
        { 
            error : function(e) { 
                console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
            },
            success : function () {
                console.log('file opened successfully');                
            }
        }
    )
    };
    **/
     /**$scope.openPDFI = function() {
    
       window.resolveLocalFileSystemURL(cordova.file.applicationDirectory +  'www/pdfs/BT168562.3.pdf', function(fileEntry) {
    
        window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {
    
            fileEntry.copyTo(dirEntry, uri.split('/').pop(), function(newFileEntry) {
    
                window.open(newFileEntry.nativeURL, '_system');
            });
        });
    });
     };
     **/
     
       
    
      //  $scope.openPDF = function() {
      //window.open('www/pdfs/BT168562.3.pdf', '_system', 'location=yes');
    //};
        
    
           /**
    $scope.openPDFf = function(filename) {
    
    newfilename = 'file.pdf'
    uri = '/www/pdfs/' + filename;
    window.resolveLocalFileSystemURL(cordova.file.applicationDirectory + uri, function(fileEntry) {
    
      window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {
    
        fileEntry.copyTo(dirEntry, newfilename, function(newFileEntry) {
    
          window.open(newFileEntry.nativeURL, '_system', 'location=yes');
        });
      });
    });
    };
    **/
     /**$scope.openPDF = function(){
    window.resolveLocalFileSystemURL(cordova.file.applicationDirectory +  'www/pdfs/BT168562.3.pdf', function(fileEntry) {
        window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {
            fileEntry.copyTo(dirEntry, 'file.pdf', function(newFileEntry) {
                cordova.plugins.fileOpener2.open(newFileEntry.nativeURL,'application/pdf',
                { 
                    error : function(e) { 
                        console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
                    },
                    success : function () {
                        console.log('file opened successfully');                
                    }
                }
                );
            });
        });
    });
    };
    **/
     /**$scope.downloadFile= function() {
            $cordovaFileOpener2.open(
                '/sdcard/pdfs/BT168562.3.pdf',
                'application/pdf'
            ).then(function() {
                console.log('Success');
            }, function(err) {
            console.log('An error occurred: ' + JSON.stringify(err));
            });
        };    **/       
    
    
    /**
    $scope.onFileOpen =function() {
            cordova.plugins.fileOpener2.open(
                cordova.file.applicationDirectory + '/www/pdfs/BT168562.3.pdf',
                'application/pdf',
                {
                    error: function() {
    
                    },
                    success: function() {
    
                    }
                }
            );
        }
            
    
    $scope.loadPDF =function () {
        console.log('loadPDF1');
        document.location.href='pdfs/BT168562.3.pdf';
    }
    
    $scope.openPDF =  function () {
        console.log('openPdf');
        var ref = cordova.InAppBrowser.open('pdfs/BT168562.3.pdf', '_blank', 'location=no');
    }
    
    /** $scope.loadPDF =function () {
        console.log('loadPDF3');
        console.log(cordova.file.applicationDirectory);
        cordova.plugins.fileOpener2.open(
            cordova.file.applicationDirectory+'www/pdfs/BT168562.3.pdf',
            'application/pdf', 
            { 
                error : function(e) { 
                    console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
                },
                success : function () {
                    console.log('file opened successfully');                
                }
            }
        );
    } 

    <button ng-click="onFileOpen()">Open pdf</button> </br>
                    <button ng-click="loadPDF()">load pdf</button>

any idea how can i do that .

Thanks a lot


#2

Still stuck on this, anyone knows how to open a pdf located in the assets ?

I can open the pdf viewer with window.open(), but it seems that the path is not correct.

Also tried with fileopener 2 plugin, same result.


#3

Hi, I know this is old but I had the same problem and had to searh several hours until I found this:

You can’t open files from your assets but you can copy them and then open it.
You will need to install the plugins

cordova-plugin-file 4.3.3 “File”
cordova-plugin-file-opener2 2.0.19 “File Opener2”

And had a pdf reader on your device.

Hope this helps.