Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Appcelerator PDF Viewer Demo

#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:

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();
".container": {
backgroundColor:"white"
}
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
"#label": {
font: {
fontSize: 12
}
}
<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>
@nageshkatke1989
Copy link

nageshkatke1989 commented Jun 26, 2017

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

@guillefixx
Copy link

guillefixx commented Jul 12, 2017

@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"/>

@chamalka-auxenta
Copy link

chamalka-auxenta commented Apr 3, 2018

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();
}
});
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment