'Converted Cordova app project does not open pdf files from server

I am new to Cordova. I am working on converting our existing website to mobile app using Cordova 11.0.0, android 10.1.1, android SDK 29/30. Most of the functionalities work fine except opening pdf files from Android (using emulator on Windows 10 for testing, not testing ios yet).

To open pdf from server url, something like mywebsit.com/account/static/pdf/myPdf.pdf. there are a lot of information out there from different time. some information might be out dated. my understanding so far is: you can not open pdf file directly from server url using inAppBrowser.open(), you have to download it to devices then open it with cordovaFileOpener2.
We also have some pdf stored in database as blob and streams out using spring ResponseEntity<byte[]>. My understanding on this is we need to do is to create a temporary file on device and open file.

Please point me to the right direction, the best way to achieve it.

I would like to know how to see console log from Android emulator too. I start the emulator from Android Studio Bumblebee(2021.1.1)

Thanks Li

Further questions: I got "cordova is not defined" when references cordova.file.applicationDirectory from our own .html file. It seems the cordova.js did get loaded, or something is missing. Please help!

Here is the cordova index.html:

html>
    <head>
        <meta charset="utf-8">

        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>FMEP WEB ON LOCALHOST 156</title>
    </head>

    <style type="text/css">
            #body{ position: fixed; width: 100%; height: 100%; background: white; }
            #content-holder { height: 300px; position: absolute; width: 100%; top: 50%; transform:
            translate(0, -50%); text-align: center; text-align: center; }
            a{ color: #b92b46; text-decoration: none; font-weight: 900;font-size: 17px; }
        </style>

    <div id="body">
        <div id="content-holder">
            <img src="img/pleasewait.gif" alt="Please wait" width="80px"><br>
            <h4 style="text-align: center;text-transform: capita">Please wait..</h4>
            <img src="img/logo.png" alt="AgroDoctor" style="margin: auto;max-width: 90%">
        </div>
    </div>

    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</html>

here is the cordova index.js

function redirectTo(location) {
    window.open = cordova.InAppBrowser.open;
    //showPleasewait('Redirecting','Please wait');
    var d = setInterval(function () {
        window.open(location, '_self',
            'location=no,zoom=no,toolbar=no');
        clearInterval(d);
    }, 1500);
}

var app = {
        // Application Constructor
        initialize: function () {
            document.addEventListener('deviceready',
                this.onDeviceReady.bind(this), false);
        },
        onDeviceReady: function () {
            this.receivedEvent('deviceready');
            console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
        },
        // Update DOM on a Received Event
        receivedEvent: function (id) {
            if (navigator.connection.type == Connection.NONE) {
                navigator.notification.alert('An internet connection is required to continue ');
                }
                else {
                    redirectTo("http://mywebsite.com/");
                    //Replce URL with your website URL
                }
            }
        };
        app.initialize();

Here is the code in requestForm.html

....
<a href="#" onclick="justToTest(); return false;" text=...">
...
<script>
function justToTest() {
console.log("calling justToTest");
          if (window.hasOwnProperty("cordova")) {
              console.log(" it is cordova on mobile app");
          } else{
              console.log("it is browser");
          }
              
            **const documentPath = ***cordova.file.applicationDirectory***** + "static/pdf/cordovaFileTest.pdf";
            cordova.plugins.fileOpener2.open(
                documentPath,
                'application/pdf',
                {   error: function(e) {
                        console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
                    },
                    success: function() {
                        console.log('file opened successfully');
                    }
                }
            );
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Converted Cordova app project does not open pdf files from server

Sources

Related Questions