Hola amig@s hoy veremos otro tema interesante, como sabemos hay muchos programas que nos permite ver archivos pdf en nuestro móvil, inclusive los dispositivos de ultima generación ya pueden hacer esto por defecto, perooooo hay veces que uno necesita controlar por así decirlo de alguna forma que nuestra aplicación tenga integrada la posibilidad de leer documentos pdf y no depender de apps de terceros.
Bien sin mas rodeos empezamos con el tutorial:
como hacer una aplicación que lea pdf online en android studio
Primero necesitamos crear una carpeta llamada assets luego guardar ahí los tres siguientes archivos
pdf.html
pdf.js
pdf.workers.js
No sabes como ni donde crear la carpeta assets no te preocupes en el siguiente enlace te dejo una guía de 5 minutos: Como crear las carpetas ASSETS en Android Studio
Los tres archivos de arriba hacen la magia, pues es un archivo html que unido a dos archivos javascript permiten modelar el archivo pdf dentro de un WebView que tendrá nuestra app
Ahora necesitamos una interfaces con tres Botones un WebView y un ProgressBar
Como yo se que eres don vergas y doña vergas te dejare el archivo activity_main para que puedas implementarlo de forma rápida.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androfast.pc.appleerpdfonline.MainActivity">
<Button
android:id="@+id/btnRecargar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="recargar"
android:text="Recargar" />
<Button
android:id="@+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btnRecargar"
android:onClick="siguiente"
android:text="Página siguiente" />
<Button
android:id="@+id/btnAnterior"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/btnNext"
android:onClick="anterior"
android:text="Página anterior" />
<WebView
android:id="@+id/webMostraPdf"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/btnRecargar"></WebView>
<ProgressBar
android:id="@+id/prCargando"
style="@style/Base.Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
Ahora te dejo código del MainActivity
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private WebView mWebViewPdf;
private String fileUrl = "http://cdn.mozilla.net/pdfjs/tracemonkey.pdf";
private String pdfHtml = "file:///android_asset/pdf.html";
private ProgressBar cargando;
public static final int LOAD_JAVASCRIPT = 0X01;
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
String javaScript = "javascript: getpdf2('"+ fileUrl +"')";
mWebViewPdf.loadUrl(javaScript);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mWebViewPdf = (WebView) findViewById(R.id.webMostraPdf);
cargando = (ProgressBar) findViewById(R.id.prCargando);
WebSettings webSettings = mWebViewPdf.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDomStorageEnabled(true);
mWebViewPdf.addJavascriptInterface(new JsObject(this, fileUrl), "client");
mWebViewPdf.loadUrl(pdfHtml);
mWebViewPdf.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
cargando.setVisibility(View.VISIBLE);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
handler.sendEmptyMessage(LOAD_JAVASCRIPT);
Toast.makeText(MainActivity.this, "Comenzar solicitud archivo pdf", Toast.LENGTH_SHORT).show();
}
});
}
public void recargar(View view) {
String javaScript = "javascript: getpdf2('"+ fileUrl +"')";
mWebViewPdf.loadUrl(javaScript);
}
public void siguiente(View view) {
mWebViewPdf.loadUrl("javascript: goNext()");
}
public void anterior(View view) {
mWebViewPdf.loadUrl("javascript: goPrevious()");
}
class JsObject {
Activity mActivity;
String url ;
public JsObject(Activity activity,String url) {
mActivity = activity;
this.url= url;
}
// Método de prueba
@JavascriptInterface
public String dismissProgress() {
cargando.setVisibility(View.GONE);
return this.url;
}
}
}
Ahora quiero que observen el siguiente trozo de código:
private String fileUrl = "http://cdn.mozilla.net/pdfjs/tracemonkey.pdf";
private String pdfHtml = "file:///android_asset/pdf.html";
Como observan hay dos cadenas que hacen referencia a dos links el primero es de un archivo pdf el que mostraremos y el segundo referencia a nuestro archivo psf.html que esta dentro de la carpeta assets.
Ahora fíjense que al final tenemos tres métodos:
recargar
siguiente
anterior
Estos métodos debemos llamarlo desde el modo gráfico hacia nuestros botones(OnClick) como les muestro en las siguientes imágenes
Por ultimo debemos ir a nuestro archivo AndroidManifest y agregar los siguientes permisos:
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
Hola soy Alex Céspedes fundador de ANDROFAST, programo algunas cosas por diversión, me gusta aprender cosas nuevas y estoy pendiente de todo lo que tenga que ver con tecnología. Este blog lo cree para todas las personas que tengan dificultades en la programación, para ser sincero nunca fui bueno y reprobé algunos cursos de programación, pero mis ganas de aprender pudieron más. SI YO PUEDO TU PUEDES ANIMO!
