How to open downloaded file (pdf,zip,docx, etc) in Phonegap app?
Question
Currently I am working on downloading module. Once user clicks download button, the file (either in pdf, zip file, or docx) will be downloaded from server and will be stored in local storage. I am able to download the file using FileTransfer.Download() method, but I can't open it by passing the file path.
Below is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "user-scalable=no,width=device-width" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Page</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", ready, true);
}
function ready() {
console.log("App is ready.");
}
function download() {
// var remoteFile = "https://dl.dropbox.com/u/6731723/a.zip";
var remoteFile = "https://dl.dropbox.com/u/6731723/Beaver.pdf";
var localFileName = remoteFile.substring(remoteFile.lastIndexOf('/') + 1);
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
fileSystem.root.getFile(localFileName, { create: true, exclusive: false }, function (fileEntry) {
var localPath = fileEntry.fullPath;
console.log("localPath1:" + localPath);
if (device.platform === "Android" && localPath.indexOf("file://") === 0) {
localPath = localPath.substring(7);
}
console.log("localPath2 save:" + localPath);
var ft = new FileTransfer();
ft.download(remoteFile,
localPath, function (entry) {
console.log("file path:" + entry.fullPath);
var linkopen = document.getElementById("openlink");
linkopen.style.display = "block";
linkopen.href = entry.fullPath;
// var dwnldImg = document.getElementById("dwnldImg");
//dwnldImg.src = entry.fullPath;
//dwnldImg.style.visibility = "visible";
//dwnldImg.style.display = "block";
}, fail);
}, fail);
}, fail);
}
function fail(error) {
console.log("error:" + error.code);
}
</script>
</head>
<body onload="init();">
<a href="#" onclick="download();">Download file</a>
<br />
<br />
<br />
<a href="#" id="openlink" style="display:none;font-size:larger;">open</a>
</body>
</html>
any idea how to get it work?
4 answers
solution1
4 2012-11-21 13:16:14
Natively PhoneGap does not allow to download a pdf file on your sd card and does not display PDF files automatically.
- Please install pdf reader on your smartphone.
- Create a plugin for downloading files.
- Create a plugin for opening the pdf using the program installed in step 1.
Details of Step 2 and 3 :
Set the development environment PhoneGap in Eclipse.
Download the java classes of example from HERE
Unzip the downloaded file in the folder " src "
Download the javascript from the example from HERE
Unzip the downloaded file in the folder " assets / www "
In the Index html file. give calls to js:
<script charset="utf-8" src="main.js"> </script>
<script charset="utf-8" src="pdfviewer.js"> </script>
<script charset="utf-8" src="downloader.js"> </script>In " res / xml / plugins.xml "add:
<plugin name="Downloader" value="com.phonegap.plugins.downloader.Downloader"/>
<plugin name="PdfViewer" value="com.phonegap.plugins.pdfViewer.PdfViewer"/>To call the methods defined in the plugin, test following code in index.html:
<! DOCTYPE HTML>
<html>
<head>
<title> PhoneGap-Android PDF Opening App</title>
<script charset="utf-8" src="phonegap-1.0.0.js"></script>
<script charset="utf-8" src="main.js"></script>
<script charset="utf-8" src="pdfviewer.js"></script>
<script charset="utf-8" src="downloader.js"></script>
</Head>
<body>
<h1> Hello World </ h1>
<a href = "#" 'sampleurf.pdf', true, downloadOkCallbak, downloadErCallbak) "> Download pdf </a> <br>
<a href="#" onclick="window.plugins.pdfViewer.showPdf('/sdcard/download/sample/samplesurf.pdf');"> open </a>
</body>
</html>Credit goes to http://www.giovesoft.com/2011/08/download-and-open-pdf-with-phonegap.html
solution2
1 2013-08-01 10:41:17
use file opener plugin ( https://github.com/markeeftb/FileOpener ) , but it requir some pdf reader or office to read psf and doc file. but first we have to install these two. and then use this plugin to open downloaderd file. But this plugin work only in case of local storage not in internal storage. plugin at https://github.com/markeeftb/FileOpener
solution3
0 2014-09-02 12:10:29
You can use the global FileOpener plugin for Cordova. it is used to open all type of files
http://plugins.cordova.io/#/package/fr.smile.cordova.fileopener
Supported Extensions
The plugin manages theses extensions:
.doc, .docx, .xls, .xlsx, .rtf, .wav, .gif, .jpg, .jpeg, .png, .txt, .mpg, .mpeg, .mpe, .mp4, .avi, .ods, .odt, .ppt, .pptx, .apk
Its not supporting .pdf extension now.(25 Sep 2014)
solution4
-1 2014-09-02 12:19:22
An inelegant but very simple solution to this problem that I've seen used, is to link to the Google docs pdf viewer service; https://docs.google.com/viewer?url=https://dl.dropboxusercontent.com/u/6731723/Beaver.pdf
You, must of course use the inappbrowser to link to this page, otherwise in iOS, the user will not be able to back out of the PDF view.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.