Appcelerator PDF Viewer Demo

README.md

#Appcelerator PDF Viewer Demo

This sampe app demonstrates how to view PDF files from the web and from local application resource on iOS and Android

The PDFs used in this demo are:

1. Resource PDF - stored in the /app/assets/pdf folder - "the Best of Wikipedia's Worst Writing"

2. Web hosted PDF - MBTA Map - https://www.mbta.com/uploadedfiles/Documents/Schedules_and_Maps/Rapid%20Transit%20w%20Key%20Bus.pdf

3. Use DocumentViewer on iOS and external app (via Intent) on Android

4. For iOS and Android the PDF file should be stored on the file system before viewing - for Android use SDCard (external storage)

5. Make sure you have a PDF viewer installed on your Android device or emulator

The demo uses the FileSystem exists() method to see if the file has been downloaded from the web (on both iOS and Android) and copied to external memory (on Android). This is optional.

##iPhone Screen Shots:

##Android Screen Shots:

index.js

function resourcePDF(e) {
    openResourcePDF();
}

function urlPDF(e) {
    openURLPDF();
}

function viewPDF(appfilepath) {
	if(OS_ANDROID) {
		try{
			Ti.Android.currentActivity.startActivity(Ti.Android.createIntent({
				action: Ti.Android.ACTION_VIEW,
				type: 'application/pdf',
				data: appfilepath
			}));
		} catch(e) {
			Ti.API.info('error trying to launch activity, e = '+e);
			alert('No PDF apps installed!');
		}
	} else {
		docViewer = Ti.UI.iOS.createDocumentViewer({url:appfilepath});
		docViewer.show();
	}
}

function openResourcePDF() {
	var appFile;
	
	if(OS_ANDROID) {
		//copy from app directory to SDCard (once)
		var originalFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'pdf/sample.pdf');
		appFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'sample.pdf');
		if(appFile.exists()===false) {
			appFile.write(originalFile.read());
		}
	} else {
		appFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'pdf/sample.pdf');
	}
	var appfilepath = appFile.nativePath;
	
	viewPDF(appfilepath);
}

function openURLPDF() {
	var appFile;
	
	if(OS_ANDROID) {
		appFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'map.pdf');	
	} else {
		appFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'map.pdf');
	}
	var appfilepath = appFile.nativePath;
	
	//Check if file has been downloaded yet
	if(appFile.exists()===false) {
		var xhr = Ti.Network.createHTTPClient();
		xhr.onload = function() {
			appFile.write(this.responseData);
			viewPDF(appfilepath);
		};
		xhr.onerror = function() {
			alert("Cannot retrieve PDF form web site")
		};
		xhr.timeout = 10000;
		xhr.open("GET", "https://www.mbta.com/uploadedfiles/Documents/Schedules_and_Maps/Rapid%20Transit%20w%20Key%20Bus.pdf");
		xhr.send();
	
	} else {
		viewPDF(appfilepath);	
	}
}

$.index.open();

index.tss

".container": {
	backgroundColor:"white"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}

"#label": {
	font: {
		fontSize: 12
	}
}

index.xml

<Alloy>
	<Window class="container">
		<View top="100" layout="vertical">
			<Button top="20" title="App Resource" onClick="resourcePDF"/>
			<Button top="20" title="URL" onClick="urlPDF"/>
		</View>>
	</Window>
</Alloy>

Hi,
I use your code but I cant download pdf. Can you please help.

@nageshkatke1989 try giving permissions to the tiapp.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

allow app to access photos, media and files on your device. For that,
function openURLPDF {
var hasStoragePermissions = Ti.Filesystem.hasStoragePermissions();
/*
your code
*/
if(hasStoragePermissions){
/*
check the appFile.exists() or not (Check if file has been downloaded yet)
*/
}else{
Ti.Filesystem.requestStoragePermissions(function(e){
if(e.success){
openURLPDF();
}else{
var dialog = Ti.UI.createAlertDialog({
message : 'Oops! try again'
});
dialog.show();
}
});
}
}