Cordova IOS App – Open Downloaded PDFs from App Sandbox using PDFJS


I’m working on a very old Cordova based Hybrid IOS app which used PDFJS library to render PDFs (user manuals). Cordova version is 6.1 and we are not using any SPA Framework like AngularJS or React. Its just plain HTML + JQuery.

Below is the structure of the project.

enter image description here

Expanded view of pdf.js
enter image description here

Currently the app is completely offline, all the PDFs and mapping files are bundled in the package (in www folder). Whenever there are updates to Manuals we use to release a new build, with latest PDFs. Below are the parts of code which is used to open PDF.

// line item in mapping JSON file, which is used to render a menu of links
"pdfPath": "/B777/PDF/Manual-1.pdf",
"page": "1",
"highlightText": "Table of Contents",
"linkText": "Click to open PDF"
 

// AppPath is as below
var AppPath = window.location.href.split(window.location.href.split("https://stackoverflow.com/").slice(-1))[0].replace(/\/$/, ""); // get the url of the application home


// On load of the app/main HTML page, adding an iFrame to the main HTML
$(document).ready(function () {
var src = AppPath + "/viewer.html?file=" + AppPath + '/Manuals/Default.pdf';
// loading the first manual in the view
$("#pdfframe").append("<iframe id='myPdf' src="https://stackoverflow.com/questions/77705153/" + src + "" width="100%" height="100%"></iframe>");

});

Below code is invoked when a user clicks on any menu item to view a particular seciton of the PDF.

// JS code on click of link to open a PDF in PDFJS Viewer.html
    $('#myPdf')[0].src = AppPath + "/viewer.html?file=" + AppPath + pdfLocation + '#page=" + pageHint;

I”m trying to do a small POC, where user can download the PDFs from server whenever they are online and new Manuals are uploaded. But I came to know that we cannot download files to ‘www’ folder.

When user downloads new PDFs they will be stored in App Sandbox or Application Directory. Is there a way to give this path to PDFJS to render a PDF ? Found below option, which says we can get the binary of the PDFs and then use below PDFJS API to show the PDF.

 // binary Response of PDF stored in App Sandbox via some plugin or native code.
 PDFJS.getDocument(binaryResponse).then(function getPdfHelloWorld(_pdfDoc) {
    pdfDoc = _pdfDoc;
    renderPage(pageNum);
  });

Could you please advice are there any other better ways to do this, like downloading latest files to www? OR providing an App Sandbox/Application Directory Path to PDFJS?
Or any other option to sync files from server ?

Changing PDFJS is not an option since we are using a lot of their APIs to highlight and search.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img