2

My goal is to view a pdf inside a form just like the way a browsercomponent displays inside a form. I have tried the code from here but that opens the pdf in an external pdf reader. My goal is to display the pdf contents within the app. So I thought that I would either have to display the pdf inside a browsercomponent or integrate an external pdf reader api to open the pdf inside a form. Now, I need help on either:

  1. how to display a pdf inside a browsercomponent OR
  2. is there a pdf reader api that i can integrate in my app such that the pdf opens inside a form or container?
James Z
  • 12,209
  • 10
  • 24
  • 44
Richard Matovu
  • 501
  • 4
  • 15

1 Answers1

2

In html, the "object" tag allows you to easily view pdfs in browsers that support this tag. Unfortunately, displaying a pdf with the object tag is possible without problems in desktop browsers, while inside a native app it doesn't work: in particular, Android 10 doesn't support it at all (it will display a white screen), while iOS 13 partially supports it, displaying only the first page and stretching it to the screen size without respecting the proportions of the pdf page (it doesn't allow to go to the next pages).

Fortunately, there is a compromise solution that works well enough on both Android and iOS, though with some differences. It also works in the Simulator if you have CEF enabled (https://www.codenameone.com/blog/big-changes-jcef.html).

This is an example code. Note that you don't need to be logged into Google, but there is an usage limit (Reaching the bandwidth limit for viewing pdf files in WebView through Google docs):

String pdfUrl = "https://www.galgani.it/pdf/linguaggi_programmazione.pdf";
Form hi = new Form("PDF Viewer", new BorderLayout());
BrowserComponent browser = new BrowserComponent();
browser.setURL("https://docs.google.com/viewer?url=" + pdfUrl);
hi.add(BorderLayout.CENTER, browser);
hi.show();

If you don't want to end up in Google's birdcage and its limits of use, then you can implement your own cross-platform solution using this javascript: https://mozilla.github.io/pdf.js/

Finally, you can use native interfaces to use third-party libraries for viewing pdfs, but this is the most complex case. There are commercial solutions to this, but I don't want to advertise to anyone.

Francesco Galgani
  • 6,137
  • 3
  • 20
  • 23
  • This is a nice solution. To avoid Google's birdcage, I want to go for the solution of implementing my own cross-platform solution. My problem is I am not good with Javascript. I am good with java, therefore i request you to give a snippet of code showing how to implement pdf.js in the browser component. – Richard Matovu Aug 10 '20 at 10:01
  • Your question is interesting, which is why I spent two hours trying to find a solution. So I discovered that the use of pdf.js is far from trivial. However, I'm comfortable only with Java, too. I wrote a code that currently works (at least in part and only to view the first page) on Android and in the Simulator with CEF. It's not a code to publish, because it needs adjustments. On iOS however it crashes. This is the link, if you can improve it and you want to share your improvements, I'll be grateful: https://gist.github.com/jsfan3/761713e3d88183aabb6cf3bf509e905e – Francesco Galgani Aug 10 '20 at 14:34
  • 1
    Okay then. Let me have a look at it and see how we can achieve a working solution. – Richard Matovu Aug 11 '20 at 09:45
  • I have implemented the code in one of my projects, and i used a pdf that has images and it took a while to render one page. I checked online and found complaints that the more pages, the longer it takes. – Richard Matovu Aug 11 '20 at 12:00
  • My code uses Base64, try to avoid it and use the pdf file directly. – Francesco Galgani Aug 11 '20 at 12:06
  • A Java-only approch could be the use of server-side code to serve the pdf as series of images at the resolution of the device that makes the request. External REST services like Cloudinary may help (I use it with Spring Boot, but it has also a cn1lib for Codename One, if I remember correctly): https://cloudinary.com/cookbook/convert_pdf_to_jpg This can solve the performance issues you noted. – Francesco Galgani Aug 11 '20 at 23:27
  • Okay.. it seems we have a number of approaches. There's an idea that popped up in my mind and it seems to be working well.. but I'm still fixing something and I'm yet to test it on iOS. I will integrate it in your code in a few hours. – Richard Matovu Aug 12 '20 at 04:26
  • I have updated your code but I am still failing to do something.. When you run that code, it solves my issue but I have a scroll bar on the pdf and another scroll bar on the browser component. I tried disabling the browser component scroll bar but i couldn't. If you have a way around that, it would be very helpful. – Richard Matovu Aug 12 '20 at 06:38
  • Try this CSS to disable scrollbar inside the BrowserComponent: https://stackoverflow.com/a/18850181/1277576 – Francesco Galgani Aug 12 '20 at 06:43
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219655/discussion-between-richard-matovu-and-francesco-galgani). – Richard Matovu Aug 12 '20 at 06:50