LANSAMobile / PWA

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
dominique
Posts: 41
Joined: Mon May 29, 2017 4:16 pm
Location: St. Gallen, Switzerland

LANSAMobile / PWA

Post by dominique » Thu Jun 03, 2021 12:43 am

Hi

We are currently working on a PWA for iPhone and Android and have to show a pdf (inline).
Does anyone know how to download a PDF content and view the result directly in an HTML container (or prim_web.page) ??

The PDF cannot be published on a server directory because it contains sensitive user data.

Thanks for help

Dominique

adrian.bustillo
Posts: 14
Joined: Thu Mar 16, 2017 5:14 pm

Re: LANSAMobile / PWA

Post by adrian.bustillo » Thu Jun 03, 2021 3:30 pm

Hi!

I had the same issue before, we were able to fix viewing PDF in HTML but I wasn't able to fixed downloading PDF in Lansa Mobile App.

For viewing PDF in HTML you can use PDFObject js library. I used an es5 built because es6 built has issues in the older versions of iOS particularly iOS 10. So to support as low as iOS 10 above we used es5 built.

Here is the link of how to use it. What I particularly used from this example is PDF.js (forced).
https://pdfobject.com/#examples

Download the pdfobject library and save it on your web server. e.g. <LANSA>/webserver/images/pdf.js/<folder of pdfobject library>. Then add the pdfobject.min.js as a resource on your web page object. (Look at the Resources tab in your web page.)

Basically, what I did was to add an HTML component in the web/view object. The HTML component contains a div element like this:

Code: Select all

<div id='pdfobject-container'></div>
Then create a Widget and method object to call the PDFObject that will embed on your HTML component. (I copied the snippet from the example). "pdfobject--container" is the parameter on your widget method. This is the value of the ID attribute of your div in your HTML component. So the PDFObject would know where to generate the PDF. You can also make the path/url of the PDF as a parameter so you can re use the widget to other page if needed. NOTE: I changed the value of PDFJS_URL based on where did you placed the pdfjs library folder. This is the viewer of the PDF. You can also remove the pdfOpenParams options. It's optional.

Code: Select all

var options = {
	pdfOpenParams: {
		navpanes: 0,
		toolbar: 0,
		statusbar: 0,
		view: "FitV",
		pagemode: "thumbs",
		page: 1
	},
	forcePDFJS: true,
	PDFJS_URL: "/images/pdf.js/<folder of pdfobject library>/web/viewer.html"
};

var myPDF = PDFObject.embed("<path/URL to pdf>", "#pdfobject--container", options);

var el = document.querySelector("#results");
el.setAttribute("class", (myPDF) ? "success" : "fail");
el.innerHTML = (myPDF) ? "PDFObject was successful!" : "Uh-oh, the embed didn't work.";
Call the method of the widget and pass the ID of the div as a parameter.

I hope this helps. I can't find where I downloaded the es5 built but I have a copy. I can email it to you if you want. I can't attach it here because the folder size is too large even though it's just 4mb.

Post Reply