venerdì 5 agosto 2011

Download and Open a pdf with PhoneGap

Scaricare e aprire un file pdf con phonegap su Android.

Nativamente phonegap non permette di fare il download di un file pdf sulla propria sd card e non visualizza in automatico i files PDF.
E' quindi necessario sviluppare dei plugins ed installare un lettore pdf sullo smartphone.



E' quindi necessario:

  1. Installare nel proprio smartphone un lettore pdf (es: Android Adobe® Reader®)
  2. Creare un plugin per il download dei files
  3. Creare un plugin per l'apertura del pdf utilizzando il programma installato al punto 1

Dettagli Punto 2/3:
  1. Impostare l'ambiente di sviluppo phonegap in eclipse.
  2. Scaricare le classi java del mio esempio da QUI
  3. Unzippare il file scaricato nella cartella "src"
  4. Scaricare i javascript del mio esempio da QUI
  5. Unzippare il file scaricato nella cartella "assets/www"
  6. Nell'index.html aggiungere le chiamate ai js:
  7.      <script type="text/javascript" charset="utf-8" src="main.js"></script>
  8.      <script type="text/javascript" charset="utf-8" src="pdfviewer.js"></script>
  9.      <script type="text/javascript" charset="utf-8" src="downloader.js"></script>
  10. In "res/xml/plugins.xml" aggiungere:
  11.     <plugin name="Downloader" value="com.phonegap.plugins.downloader.Downloader"/>
  12.     <plugin name="PdfViewer" value="com.phonegap.plugins.pdfViewer.PdfViewer"/>

Per chiamare i metodi definiti nel plugin. Il file index.html di test potrebbe essere questo:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" charset="utf-8" src="pdfviewer.js"></script>
<script type="text/javascript" charset="utf-8" src="downloader.js"></script>

</head>
<body>
<h1>Hello World</h1>
<a href="#" onclick="window.plugins.downloader.downloadFile('http://www.cataniaperte.com/sport/articoli/Kitesurf.pdf','/sdcard/download/kite/', 'Kitesurf.pdf', true, downloadOkCallbak, downloadErCallbak);">Download pdf</a><br>
<a href="#" onclick="window.plugins.pdfViewer.showPdf('/sdcard/download/kite/Kitesurf.pdf');">open</a>
</body>
</html>

6 commenti:

  1. Buongiorno,
    ho trovato il suo articolo molto interessante e confermo il fatto che funzioni su Android 3.1 su tablet Acer Iconia. Volevo chiederle se è possibile far aprire al lettore di pdf un percorso che risiede all'interno della App, per intenderci meglio nella cartella RAW. Ho fatto alcuni test cambiando sia la parte di codice in js aggiungendo "usePhonegap" sia la parte in Java ma senza successo. Intanto la ringrazio per l'utilissimo plugin.
    Saluti,
    Andrea

    RispondiElimina
  2. Da quello che ho letto in giro, non credo sia possibile scrivere all'interno della App, neanche nella asset/www

    RispondiElimina
  3. Grazie della celere risposta. Forse mi sono espresso male, a me basterebbe riuscire a leggere i pdf all'interno della cartella della App, che inserisco manualmente in fase di sviluppo, quindi in asset/www oppure in res/raw. Per intenderci NON stò usando il plugin downloader, ma sto utilizzando solo il pdfViewer che vorrei che leggesse appunto in res/raw o asset/www. Grazie, Andrea

    RispondiElimina
  4. Io ho già letto e parserizzato un file xml contenuto nella asset/www tramite una richiesta ajax, vedi se puoi prendere spunto dalla mia funzione:
    https://docs.google.com/document/d/12Vm4Tu2duAyX5mW2VLR5AEqLWiD26NpTyMeRca_k-Sg/edit?hl=en_US

    RispondiElimina
  5. Intanto ti ringrazio della parte in Javascript. Io sto cercando di modificare la funzione showPdf() contenuta in pdfViewer.java affinchè legga il contenuto da asset/www e non dalla cartella download nella sd. La parte di codice da cambiare secondo me è: Uri path = Uri.fromFile(file);
    In questo modo potrei richiare la funzione:
    onclick="window.plugins.pdfViewer.showPdf('test.pdf');" direttamente nella pagina .html che pesca il file pdf da asset/www

    RispondiElimina
  6. Questo commento è stato eliminato da un amministratore del blog.

    RispondiElimina

Nota. Solo i membri di questo blog possono postare un commento.