How to show or open PDF documents file from mobile device app to browser

0
Hi, I have requirement for showing pdf document file which has always open in browser with new tab where we are generating this pdf file in mobile app. Please let me know how could I do this?
asked
4 answers
3

Hi Jitenda, the default download file action in a microflow allows you to view a pdf document in the mobile app. Then the pdf document is opened using the internal app browser. The downside to this approach is that you cannot zoom in or print the document, see screendump.

In the scenario as described below, you can open the pdf document in the system browser itself i.e. safari for iOS devices. The downside is you get the pop-pup dialog asking you to confirm to download the file, but after that you can use the default zoom and printer and sharing options supported by the browser, see screendump below.

If you want to support this feature in your mobile app then you need to solve two issues. The first is to make your pdf documents available to the outside world and the second is to make sure hyperlinks are opened in the system browser, i.e. safari for iOS. 

The first step is to make downloadable links available in your project. For this feature you need to add the Deep link module from the appstore. With this module you can configure links to trigger microflows such as http://myapp.com/link/download/RandomHash

Then you need to create your own custom microflow which is called from the deep link module, i.e. DL_DownloadFile. In the sample microflow below the input parameter is an id (i.e. RandomHash), which is used to get the proper PDF file document from the database. Followed by the download file action. You can adjust the microflow to your needs.

The second step is to make sure hyperlinks are opened in the system browser instead of the inapp browser. For this to work properly you need to add the HTML widget to the layout page. Then the HTML widget contains the following script to change the default click behavior.

require(["dojo/dom-attr", "dojo/on", "dojo/domReady!"], function(domAttr, on) {
	if(!window.device) {
		window.device = { platform: 'browser' };
	}
	if(!window.extLinksHandler) {	
		on(document, 'a[href^="http"]:click', function(e) {
			e.preventDefault();
			var url = domAttr.get(e.target, 'href');
			if(device.platform.toLowerCase() === 'android' || device.platform.toLowerCase() === 'ios') {
				window.open(url, '_system');
			} else
				window.open(url, '_blank');
		});
		window.extLinksHandler = true;
	}
});

Then final step is to create the hyperlink on your download page. In this example we use the formatString widget to display the download link. Add th widget to your page and fill in the display string with: <a href="http://myapp.com/link/download/${1}" target="_system">Download PDF</a>. Make sure the ${1} parameter is mapped to your unique Id attribute, i.e. RandomHash.

Hope this helps 

 

answered
1

Hi Jitenda,

You can try the approach from a previous question:

https://forum.mendix.com/link/questions/3510

Kind Regards,

answered
0

That is more a stackoverflow or phonegap question. Maybe this post is of help: https://stackoverflow.com/questions/11395876/zoom-in-zoom-out-in-phonegap-for-ios

Regards,

Ronald

 

answered
0

Hi, I am not quite sure does it help if I say that you have to use Cordova’s InAppBrowser to open PDF’s in an external browser. 

I have written a tutorial about the topic: https://fullstack-tutorials.com/cordova/cordova-app-open-link-in-browser

answered