Viewing PDF Files [Xamarin.Android]


pdf

Introducción

En toda aplicación empresarial normalmente podemos encontrarnos con los famosos: “Términos y Condiciones” o el “Aviso de Privacidad”, los cuales por lo regular son archivos .PDF que se encuentran en nuestro sitio web.

 

Como desarrollador seria fácil solamente redireccionarlo a una vista embebida, por ejemplo:

<WebView Source="http://www.yoursite.com/your.pdf" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />

Sin embargo, esta opción no es la mejor, es por ello que en esta entrada veremos como poder visualizar un archivo .PDF dentro de nuestra aplicación realizada en Xamarin.

El problema

Mostrar un archivo PDF parece una tarea fácil y depende de la plataforma a la que nos dirigamos. Para iOS, básicamente se puede simplemente cargar el archivo en un WebView y eso es todo. Se mostrará muy bien. Pero se tendria que agregar un poco de magia para habilitar el zoom, pero eso es todo.

Para Android y Windows es un poco diferente, puesto que no tienen un visor de PDF predeterminado y no se puede confiar en que los usuarios tengan su propio visor. Lo ideal sería mantener a los usuarios en su aplicación al mostrar un archivo PDF.

Manos a la obra… Implementación

Una vez creada la solución, en nuestro proyecto .NET Standard procedamos a crear la clase que brindara las propiedades adecuadas para poder abrir un archivo PDF, a este lo denominaremos “CustomWebView”. Para esto, hagamos clic derecho y seleccionemos Agregar > Nuevo elemento o Agregar > Clase.

Ingresemos el siguiente código:

public class CustomWebView : WebView
 {
 public static readonly BindableProperty UriProperty = BindableProperty.Create(propertyName: "Uri",
 returnType: typeof(string),
 declaringType: typeof(CustomWebView),
 defaultValue: default(string));

public string Uri
 {
 get { return (string)GetValue(UriProperty); }
 set { SetValue(UriProperty, value); }
 }

public static readonly BindableProperty IsPdfProperty = BindableProperty.Create(propertyName: "IsPdf",
 returnType: typeof(bool),
 declaringType: typeof(CustomWebView),
 defaultValue: default(bool));

public bool IsPdf
 {
 get { return (bool)GetValue(IsPdfProperty); }
 set { SetValue(IsPdfProperty, value); }
 }
 }

En donde solo implementaremos dos propiedades. Una es la url del PDF y la otra es una bandera que identifica si la url es relativa a un PDF u otra cosa.

Android

Como hemos visto en otros artículos, necesitaremos crear el render que implementara las propiedades anteriores, para esto seleccionemos el proyecto, clic secundario> Add> Class…

Llamemoslo: CustomWvRender y pasemos a editarlo.


public class CustomWvRender : WebViewRenderer
 {
 public CustomWvRender(Context context) : base(context)
 {
 }

protected override void OnElementChanged(ElementChangedEventArgs e)
 {
 base.OnElementChanged(e);

if (e.NewElement != null)
 {
 var customWebView = Element as CustomWebView;
 Control.Settings.AllowUniversalAccessFromFileURLs = true;
 if (!customWebView.IsPdf)
 Control.LoadUrl(customWebView.Uri);
 else
 Control.LoadUrl("https://drive.google.com/viewerng/viewer?embedded=true&url=" + customWebView.Uri);
 }
 }
 }

No olvidemos de añadir la dependencia:


[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWvRender))]

En donde CustomWvRender pertenece a Android y CustomWebView al proyecto .NET Standard. El método OnElementChanged realiza dos acciones:

  • Mediante “AllowUniversalAccessFromFileURLs = true”:establece si el JavaScript que se ejecuta en el contexto de un esquema de URL de archivos, se deba permitir acceder a los contenidos de cualquier origen.
  • Abre la url: normalmente si la url no es un “documento PDF” con la ayuda de https://drive.google.com/viewerng/viewer/ lo hace un “documento PDF”.

Regresemos a nuestro código compartido. Para brindar un flujo completo generemos dos archivos nuevos, el primero sera una clase (ViewModel) que permitirá ser el intermedio entre el segundo archivo y el render creado con anterioridad, a este lo llamaremos: WebViewPageViewModel.

Añadamos lo siguiente en el archivo WebViewPageViewModel:


public class WebViewPageViewModel : INotifyPropertyChanged
 {

public bool IsPdf { get; set; }
 public string Uri { get; set; }

public WebViewPageViewModel(string uri, bool isPdf)
 {
 Uri = uri;
 IsPdf = isPdf;
 }

public event PropertyChangedEventHandler PropertyChanged;
 }

El segundo archivo sera una nueva pagina (ContentPage), la cual nombraremos: WebViewPage.

En la vista (XAML) ingresemos lo siguiente:

03

Recuerda que se debe de añadir la dependencia del render para que pueda funcionar:


xmlns:local="clr-namespace:PDFViewDemo;assembly=PDFViewDemo"

En el .CS, insertemos el código pertinente:


public partial class WebViewPage : ContentPage, INotifyPropertyChanged
 {

public WebViewPage(string uri, bool isPdf)
 {
 InitializeComponent();
 this.BindingContext = new WebViewPageViewModel(uri, isPdf);
 }
 }

Por ultimo editemos el archivo MainPage.xaml:

04

MaiPage.xaml.cs


public MainPage()
		{
			InitializeComponent();
		}

        void OpenPdf(object sender, System.EventArgs e)
        {
            Application.Current.MainPage.Navigation.PushModalAsync(new WebViewPage("https://gotocon.com/dl/goto-aar-2014/slides/JamesMontemagno_XamarinFormsNativeIOSAndroidAndWindowsPhoneAppsFromONECCodebase.pdf", true));
        }

        void OpenJpg(object sender, System.EventArgs e)
        {
            Application.Current.MainPage.Navigation.PushModalAsync(new WebViewPage("https://i.pinimg.com/originals/0c/6f/17/0c6f17ab1428e025228e4c15fb9c0c5f.jpg", false));
        }

Ya con esto habremos terminado, guardemos y ejecutemos.

Resultado

ViewPDFXamarin.gif

Descarga el código completo desde mi GitHub.

GitIronMan

¡Hasta la próxima!

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s