Render PDF from HTML and show it

Question

I'm having issues with mobile development.

As I'm trying to render a PDF from HTML, I need to show it on my mobile device. So far, I'm able to render a pdf in the form of a datauri (using jsPDF), but showing it on my mobile device is just ... well, I've got no words for it, only frustration :)

I'm working with a simple test HTML file, PhoneGap and jsPDF (w/ Html2Canvas)

HTML

<div id="content">
   <div>
     <div>
        Hello world
     </div>
   </div>
</div>

<button type="button">
    Download
</button>

CSS

div {
   padding: 15px;
   background-color: lightblue;
   border: 2px solid black;
   width: 100%;
}

JS

$("button").click(function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML($("#content"), function() {
        pdf.output("datauri");
    });
});

Ofcourse, I wrapped this in my $(document).ready(function() { ... }); The issue is that on iOS it'll open that file, but there is no way to save it in some way ... Same goes for Android, which doesn't even want to open or process it.

I have also tried using the InAppBrowser from PhoneGap/Cordova, where as I'm supposed to use window.open(datauri, "_system")to open in it the device's default browser.

That didn't work either.

I need to open a .pdf file (rendered from HTML) and give the user the option to save it on their mobile device or any alternative to saving it (doesn't have to be on the device's storage, could be Dropbox, Google Drive, etc.)

Does anyone have any experience with this, because I'm at the edge of falling into the deep void called "insanity"

Answer 1

Android web view don't support PDF viewing by default. So the best option is to use open the PDF file using FileOpener2 Plugin.

You can download the file if required using file transfer Plugin and store the same in device using File Plugin and open the file(PDF) in device using FileOpener2 Plugin. Request you to have a look at this github link where i have provided the working sample code using all the above mentioned plugins.