Xamarin Forms – Carregando PDF em um WebView

Neste artigo eu vou mostrar como podemos carregar arquivos PDF em uma view WebView em aplicações Xamarin Forms.

O componente WebView é uma view usada para a exibição de conteúdos web e HTML em seu aplicativo. O WebView é muito versátil e possui os seguintes recursos:

• Conteúdo: suporta várias fontes de conteúdo, incluindo HTML embutido, páginas web, e as strings HTML.
• Navegação: inclui suporte para navegar para uma determinada página e voltar.
• Eventos: escuta e responde às ações tomadas pelo usuário no WebView.
• Layout: possui alguns requisitos específicos de como ele é exibido.

Para mais detalhes, veja o meu artigo de apresentação do componente “WebView: Xamarin Forms – Apresentando e usando a WebView”

Veremos como abrir arquivos PDF em uma WebView e fazer o download. Para isso vamos usar a seguinte abordagem:

• Usar o evento Navigating do WebView para obter a URL do arquivo no qual o usuário clicou no WebView
• Passar a URL do arquivo PDF para o método OpenUrl()

Dessa forma poderemos baixar arquivos PDF em páginas que contenham links para esses arquivos. É uma solução meio quebra-galho, mas funciona neste cenário.

Recursos Usados

• Visual Studio 2017 Community

Criando o projeto Xamarin Forms

Abra o VS 2017 Community, clique em “New Project” e a seguir escolha “Cross Platform” > “Cross Platform App” (Xamarin.Forms) e informe o nome XF_WebViewPDF.

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

• Shared Project
• Portable Class Library (PCL)

Porém, a partir da versão 15.5 do Visual Studio (lançada em dezembro/2017), a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, Xamarin Forms, e a seguir marque .NET Standard e clique no botão “OK“.

Pronto! Nosso projeto já esta criado (verifique a necessidade de atualizar a versão do Xamarin Forms no seu projeto. Atualmente (06/2018), a versão mais atual é a 3.0.0).

Definindo o código da MainPage.xaml

Abra o arquivo MainPage.xaml e inclua no código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_WebViewPDF"
             x:Class="XF_WebViewPDF.MainPage">
    <StackLayout>
	<Label Text="WebView - PDF" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
        <WebView x:Name="navegador" Source="http://www.pdfpdf.com/samples.html"  
                 Navigating="webOnNavigating"  
                 HorizontalOptions="FillAndExpand"  
                 VerticalOptions="FillAndExpand"/>
    </StackLayout>
</ContentPage>

Neste código, temos:

Um controle StackLayout que está empilhando os controles:

• Um Label onde temos estamos exibindo o texto no topo da página
• Um WebView onde definimos a propriedade Source para a URL onde teremos links para arquivos PDF

No arquivo MainPage.xaml.cs temos o código do evento webOnNavigating do botão de comando que é visto a seguir:

using System;
using Xamarin.Forms;
namespace XF_WebViewPDF
{
    public partial class MainPage : ContentPage
    {
	public MainPage()
	{
		InitializeComponent();
	}
        protected void webOnNavigating(object sender, WebNavigatingEventArgs e)
        {
            if (e.Url.Contains(".pdf"))
            {
                // retornando a URL
                var pdfUrl = new Uri(e.Url);
                // Abre a URL do PSD com o navegador para download
                Device.OpenUri(pdfUrl);
                // Cancela navegacao ao clicar
                // (reêm a mesma pagina.)  
                e.Cancel = true;
            }
        }
    }
}

Neste código verificamos se a URl contém um indicação da extensão ‘.pdf‘ e abrimos a url obtida no link clicado.

Executando o projeto usando o emulador Genymotion para o Android obteremos o seguinte resultado:

Ao clicar no link a URL será extraída e o download iniciado.

Pegue o código do projeto compartilhado aqui: XF_WebViewPDF.zip (sem as referências)