Off Line

108 views
Skip to first unread message

Francesco Perfetti

unread,
Apr 12, 2016, 12:43:26 PM4/12/16
to pdfnet-w...@googlegroups.com
Thanks for your reaply,

I'm using indexedDB to store files, I'm watching offline-version from pdftron samples, everything is simple to understand, but I dont know how to check files into indexedDB, because I don't know db names and   the open function doesn't work. Followi a code sample:


<!doctype html>
<html manifest="offline-sample.appcache">
<head>
<link href="css/viewer.css" rel="stylesheet" type="text/css">
</head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- include the following meta tags for mobile devices -->
        <!--<meta name="apple-mobile-web-app-capable" content="yes" />-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        
     
<script src="js/jquery-1.7.2.min.js"></script>
<script src="lib/WebViewer.min.js"></script>
<script src="lib/html5/ControlUtils.js"></script>
<script src="lib/html5/CoreControls.js"></script>
        <script src="lib/html5/external/modernizr.custom.js"></script>
        <script type="text/javascript">
           var library = [
                {
                    id: "tiger",
                    location: "file/tiger.xod",
                    thumb: "tiger.png"
                },
                {
                    id: "getting_started",
                    location: "file/GettingStarted.xod",
                    thumb: "GettingStarted.png"
                },
                {
                    id: "form_actions",
                    location: "file/form-actions.xod",
                    thumb: "form_actions.jpg"
                },
                {
                    id: "webviewer_developer_guide",
                    location: "file/WebViewer_Developer_Guide.xod",
                    thumb: "WebViewer_Developer_Guide.jpg"
                },
                {
                    id: "form1",
                    location: "file/form1.xod",
                    thumb: "form1.png"
                },
                {
                    id: "webviewer_user_guide",
                    location: "file/WebViewer_User_Guide.xod",
                    thumb: "WebViewer_User_Guide.jpg"
                }
            ];
            $(function() {
console.log('start function');
                if (!(Modernizr.indexeddb || Modernizr.websqldatabase)) {
                    alert('questo browser non supporta offline mode');
                    return;
                }

                var docMenu = $('#documentMenu');

                // unfortunately have to use setTimeout to let the Web SQL database intialize
                setTimeout(function() {

                    // create list of documents in the library
                    for (var i = 0; i < library.length; ++i) {
                        (function(i) {
                            var docInfo = library[i];

                            var docDiv = $('<div>').addClass('doc');
                            var thumbContainer = $('<div>').addClass('thumbContainer');
                            thumbContainer.append($('<img>').attr('src', docInfo.thumb).addClass('thumbnail'));

                            var button = $('<input type="button">');

                            // check whether we've already downloaded this document
                            checkDownloaded(docInfo.id, function(isDownloaded) {
                                if (isDownloaded) {
                                    docInfo.downloaded = true;
                                    button.attr('value', 'View');
                                } else {
                                    button.attr('value', 'Download');
                                }
                                docDiv.append(button);
                            });

                            button.click(function() {
                                if (docInfo.downloaded) {
                                    loadViewer(docInfo);
                                } else {
                                    button.attr('value', 'Downloading...');
                                    storeOffline(docInfo, function(err) {
                                        if (err) {
                                            button.attr('value', 'Error');
                                        } else {
                                            docInfo.downloaded = true;
                                            button.attr('value', 'View');
                                        }
                                    });
                                }
                            });

                            docDiv.append(thumbContainer);

                            docMenu.append(docDiv);
                        })(i);
                    }

                }, 1000);

                function checkDownloaded(id, onComplete) {
console.log('checkDownloaded');
                    var doc = new CoreControls.Document(id);
                    doc.initOfflineDB(function() {
                        onComplete(doc.isDownloaded());
                    });
                }

//invocato dopo il click su download
                function storeOffline(docInfo, onComplete) {
console.log('store offline');
                    var cacheHinting = CoreControls.PartRetrievers.CacheHinting;
                    var partRetriever = new CoreControls.PartRetrievers.StreamingPartRetriever(docInfo.location, cacheHinting.CACHE);

                    var doc = new CoreControls.Document(docInfo.id);
                    doc.loadAsync(partRetriever, function(err) {
                        if (err) {
                            onComplete(err);
                            return;
                        }
                        doc.initOfflineDB(function() {
console.log('initDB');
                            doc.storeOffline(function() {
                                onComplete();
                            });
                        });
                    });
                  
                                 
                                                                                                   
                    /*var dati = {};
dati.version = 1;
 
dati.open = function() {
console.log("dati open");
    
   var request = window.indexedDB.open("dati", this.version);
 
   request.onupgradeneeded = function(event) {
console.log('OnUpgraded');
       var db = event.target.result;
 
       if(db.objectStoreNames.contains("utenti")) {
            
           db.deleteObjectStore("utenti");
       }
        
       var store = db.createObjectStore("utenti", {keyPath: "id"});
   };
 
   request.onsuccess = function(event) {
        console.log("On Success");
       dati.db = event.target.result;
   };
 
   request.onerror = function(event) {
        
       console.log("Si è verificato un errore nell'apertura del DB");
   };
};*/
                    
                    
                    //console.log('pre open database');
                     /*var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
          var msg;
           
           db.transaction(function (tx) {
           tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
              var len = results.rows.length, i;
              msg = "<p>Found rows: " + len + "</p>";
              document.querySelector('#status').innerHTML +=  msg;
              for (i = 0; i < len; i++){
                 msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                 document.querySelector('#status').innerHTML +=  msg;
              }
           }, null);
         });*/
           
           
                }

                function loadViewer(docInfo) {
console.log('loadViewer');
                    var viewerElement = $('#viewer');
                    viewerElement.empty();
                    myWebViewer = new PDFTron.WebViewer({
                        type: "html5,html5mobile",
                        path: 'lib', // URL path to the WebViewer root folder
                        initialDoc: docInfo.location, // URL path to the document
                        documentId: docInfo.id,
                        startOffline: true, // requires startOffline to be true to view in offline mode
                        enableAnnotations: true,
                        streaming: false,
                        mobileRedirect: false,
//useDownloader:true
                    }, viewerElement[0]);
                }
                
                  console.log("indexedDB open");
                                                            
                    var idbSupported = false;
var db;
 
window.addEventListener("DOMContentLoaded", function(){
console.log("addEventListener");
if("indexedDB" in window) {
console.log("indexedDB supportato");
idbSupported = true;
}
 
if(idbSupported) {
var openRequest = indexedDB.open("test",1);
 
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("pdf_store")){
thisDB.createObjectStore("pdf_store");
console.log("creato pdf_store table");
}else{
console.log("pdf_store è già esistente");
}
console.log("Upgrading...");
};
 
openRequest.onsuccess = function(e) {
console.log("Success!");
db = e.target.result;
console.log(db);
//addPdfFiles();
//document.querySelector("#addButton").addEventListener("click", addPdfFiles, false);
};
 
openRequest.onerror = function(e) {
console.log("Error");
console.dir(e);
};
 
}else{
return;
}
 
},false);
                
            });
        </script>

    <body>
        <div id="viewer" style="background: #929292"></div>

        <div id="documentMenu">
            <div><h2>Offline Library Sample</h2></div>
        </div>
    </body>
</html>

Some advices? Thanks.

Francesco.

Il giorno mercoledì 13 aprile 2016 02:40:03 UTC+2, Anatoly Kudrevatukh ha scritto:
Hello Francesco,

Based on your description it appears that setting up cashing would be the easiest and browser independent approach


I wouldn't recommend storing files in local storage, as different browsers have different size limits and it is not optimized for file storage in general.

On Tuesday, April 12, 2016 at 9:43:26 AM UTC-7, Francesco Perfetti wrote:
Hi all guys, 

I'm developing a web app, one of the functionality that I'll have to develop is based on save a lot of pdf file inside local storage. 

The maximum floor space would be about 700MB. 
Offline mode in pdftron could help me? 
is it compatible with IE9? 

Thank and haave a good day. 

Francesco.

Anatoly Kudrevatukh

unread,
Apr 12, 2016, 8:40:03 PM4/12/16
to pdfnet-w...@googlegroups.com

Francesco Perfetti

unread,
Apr 15, 2016, 12:53:17 PM4/15/16
to PDFTron WebViewer
Hi,

Thanks for your response. 
HTML cache does not have a space limit? I thought to use WebViewer offline mode and indexedDB to save pdf files.
Is there some guide or tutorial that explain how to download files and prefetching it? I need a cose samples.

Thanks again.

Francesco.

Il giorno mercoledì 13 aprile 2016 02:40:03 UTC+2, Anatoly Kudrevatukh ha scritto:

Francesco Perfetti

unread,
Apr 15, 2016, 12:53:17 PM4/15/16
to PDFTron WebViewer
Hi,

thanks for your response, I need a code example, but isn't there a getting start on pdftron offline mode, for donwload and open a pdf files?

Francesco. 

Il giorno mercoledì 13 aprile 2016 02:40:03 UTC+2, Anatoly Kudrevatukh ha scritto:

Francesco Perfetti

unread,
Apr 15, 2016, 12:53:17 PM4/15/16
to PDFTron WebViewer
Thanks for your reaply,

I'm using indexedDB to store files, I'm watching offline-version from pdftron samples, everything is simple to understand, but I dont know how to check files into indexedDB, because I don't know db names and   the open function doesn't work. Followi a code sample:


<!doctype html>
<html manifest="offline-sample.appcache">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- include the following meta tags for mobile devices -->
        <!--<meta name="apple-mobile-web-app-capable" content="yes" />-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html, body{
                margin: 0;
                height:100%;
                font-family: Verdana, Geneva, sans-serif;

            }
            h2 {
                color: #009EDA;
                margin:0px;
            }
            #viewer {
                width: 800px;
                height: 600px;
                border: 1px solid silver;
                float:left;
            }
            #documentMenu {
                width: 375px;
                padding:10px;
                
                float:left;
                font-size: smaller;
                border: 2px solid grey;
                border-radius: 5px;
                
                background: #ffffff; /* Old browsers */
                background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
            }

            .thumbnail {
                max-height: 100px;
                max-width: 100px;
            }

            .thumbContainer {
                width: 125px;
                height: 100px;
            }

            .doc {
                width: 125px;
                text-align: center;
                float: left;
            }

        </style>
                    console.log("indexedDB open");
                    var dati = {};
dati.version = 1;
 
dati.open = function() {
console.log("dati open");
    
   var request = window.indexedDB.open("dati", this.version);
 
   request.onupgradeneeded = function(event) {
console.log('OnUpgraded');
       var db = event.target.result;
 
       if(db.objectStoreNames.contains("utenti")) {
            
           db.deleteObjectStore("utenti");
       }
        
       var store = db.createObjectStore("utenti", {keyPath: "id"});
   };
 
   request.onsuccess = function(event) {
        console.log("On Success");
       dati.db = event.target.result;
   };
 
   request.onerror = function(event) {
        
       console.log("Si è verificato un errore nell'apertura del DB");
   };
};
                    
                    
                    //console.log('pre open database');
                     /*var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
          var msg;
           
           db.transaction(function (tx) {
           tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
              var len = results.rows.length, i;
              msg = "<p>Found rows: " + len + "</p>";
              document.querySelector('#status').innerHTML +=  msg;
              for (i = 0; i < len; i++){
                 msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                 document.querySelector('#status').innerHTML +=  msg;
              }
           }, null);
         });*/
           
           
                }

                function loadViewer(docInfo) {
console.log('loadViewer');
                    var viewerElement = $('#viewer');
                    viewerElement.empty();
                    myWebViewer = new PDFTron.WebViewer({
                        type: "html5,html5mobile",
                        path: 'lib', // URL path to the WebViewer root folder
                        initialDoc: docInfo.location, // URL path to the document
                        documentId: docInfo.id,
                        startOffline: true, // requires startOffline to be true to view in offline mode
                        enableAnnotations: false,
                        streaming: false,
                        mobileRedirect: false,
//useDownloader:true
                    }, viewerElement[0]);
                }
            });
        </script>

    <body>
        <div id="viewer" style="background: #929292"></div>

        <div id="documentMenu">
            <div><h2>Offline Library Sample</h2></div>
        </div>
    </body>
</html>

Some advices? Thanks.

Francesco.

Il giorno mercoledì 13 aprile 2016 02:40:03 UTC+2, Anatoly Kudrevatukh ha scritto:

Anatoly Kudrevatukh

unread,
Apr 18, 2016, 10:18:47 PM4/18/16
to PDFTron WebViewer
I'm sorry, but I am not sure what this code is supposed to be doing.

could you please explain what is the expected result and what you think goes wrong?

Thanks.
Reply all
Reply to author
Forward
0 new messages