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
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)