File pdf – Html 5 in una finestra modale
Spesso si ha la necessità di visualizzare un file PDF all’interno di un popup html.
La soluzione più rapida che mi è venuta in mente (sicuramente ne esistono altre!) è stata quella di affidarmi alla libreria Fancybox che come cita la pagina del progetto :
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
Fancybox, per poter funzionare correttamente, necessita di Jquery.
Codice della pagina Html
Questa è la parte di codice che ho inserito all’interno dell’header della pagina.
<!-- Add jQuery library --> <script type="text/javascript" src="fancybox/lib/jquery-1.9.0.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
Successivamente ho sviluppato una semplice funzione in Jquery che mi permette di aprire il popup.
<script> $(document).ready(function()="" {="" $(".pdf").click(function()="" $.fancybox({="" 'width':="" '100%',="" or="" whatever="" 'height':="" 'autodimensions':="" true,="" 'content':="" '<embed="" src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=100,0,0" type="application/pdf" height="1000" width="800px" >',="" 'onclosed':="" function()="" $("#fancybox-inner").empty();="" }="" });="" return="" false;="" <="" script><="" pre="">
Modificando la parte relativa
height="1000" width="800px"
all’interno della riga
'<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=100,0,0" type="application/pdf" height="1000" width="800px" />'
è possibile definire la dimensione della finestra da aprire.
All’interno della pagina html dovrà essere inserito un link con la seguente sintassi:
<a href="filepdf.pdf" class="pdf">File da aprire</a>
Risulta fondamentale l’utilizzo della classe di tipo “pdf” per poter accedere alla proprietà del link dallo script in jquery.
Il file che dovrà essere visualizzato si chiamerà filepdf.pdf.
Il codice completo della semplice pagina in HTML5
<!doctype html>
<html>
<head>
<title>< title>="" <meta="" charset="utf-8" >="" <--="" add="" jquery="" library="" -->="" <script="" type="text/javascript" src="fancybox/lib/jquery-1.9.0.min.js" ><="" script>="" <!--="" mousewheel="" plugin="" (this="" is="" optional)="" fancybox="" <link="" rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" <script>="" $(document).ready(function()="" {="" $(".pdf").click(function()="" $.fancybox({="" 'width':="" '100%',="" or="" whatever="" 'height':="" 'autodimensions':="" true,="" 'content':="" '<embed="" height="1000" width="800px" >',="" 'onclosed':="" function()="" $("#fancybox-inner").empty();="" }="" });="" return="" false;="" <="" head>="" <body>="" <a="" class="pdf" >file="" da="" aprire<="" a>="" body><="" pre="">
</html