2

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"

Jorrex
  • 1,503
  • 3
  • 13
  • 32
  • Regarding your issue in dealing with opening pdf in android device using InAppBrowswer, you gotta set window.open = cordova.InAppBrowser.open; before using window.open. That should resolve your problem of opening pdf in android device – Gandhi Jun 13 '16 at 15:02
  • This might resolve your file save issue - http://stackoverflow.com/questions/35503051/filetransfer-cordova-download-path/36152991#36152991 – Gandhi Jun 13 '16 at 15:06
  • I'll take a look at it when I have some spare time. I did read once that iOS wasn't really easy when it came to saving files, since the file management was sort of blocked? And as for Android, as far as I know, I cannot open a dataUri in the browser on Android Marshmallow, haven't been able to try it on previous versions, but got one to test it with, just gotta configure it first. – Jorrex Jun 17 '16 at 09:23
  • As far as my experience, i found it fairly straight forward to write files in iOS. Faced few permissions issues with Android Marshmallow which got fixed after updating file plugin to version 4.2.0 – Gandhi Jun 17 '16 at 09:36
  • @Ghandi after a few more attempts at opening a PDF from a datauri, I couldn't do a thing. If you are interested, I uploaded my project to Dropbox (https://www.dropbox.com/s/xgc3vx0qp15rmt6/renderPDF.zip?dl=0) perhaps you'd find the piece I'm missing or doing wrong? – Jorrex Jun 20 '16 at 14:56
  • Will check Jorrex. Meanwhile you please have a look at this link - https://github.com/gandhirajan/Cordova_File_Operations Hope it may give some lead to you – Gandhi Jun 20 '16 at 15:40
  • I managed to make it work. Thanks @Gandhi! If you would post this as an answer, I can mark it as the answer to this question :) – Jorrex Jun 29 '16 at 06:47
  • 1
    I m glad that you cracked it Jorrex. Thanks for getting back. Have posted the answer. You need not have to think of deep void called "Insanity" anymore :) Cheers Happy coding – Gandhi Jun 29 '16 at 07:54

1 Answers1

0

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.

Gandhi
  • 11,875
  • 4
  • 39
  • 63
  • It wasn't easy understanding what happens in your code, but I did crack it. Another issue I encountered was with the FileOpener2. I followed the example on the github page, where he used `cordova.fileOpener2.open({...})` and that resulted in an error. By looking at his updated code, he changed the method to `cordova.fileOpener2a.open({...})`. Took me a while to figure it out! – Jorrex Jun 29 '16 at 09:55
  • @Jorrex i guess you installed the fileopener plugin from the forked path which has a fix related to iOS. But i installed from the main path and it works fine as in the my code sample. Check this out - https://github.com/pwlin/cordova-plugin-file-opener2/issues/4 – Gandhi Jun 29 '16 at 10:00