Ho usato il tag <iframe> per incorporare un file pdf.
<iframe id="iframepdf" src="files/example.pdf"></iframe>
Questo funziona bene in Chrome, IE8+, Firefox ecc, ma per qualche motivo, quando alcune persone lo stanno visualizzando in IE8, i file vengono scaricati invece di essere incorporati. So che questo browser è obsoleto, ma è il browser standard nel mio ufficio e come tale, il sito web deve essere progettato per questo.
Qualcuno ha qualche idea sul perché questo stia accadendo, come posso sistemarlo o mettere un messaggio di errore invece di lasciare che i file vengano scaricati?
Viene scaricato probabilmente perché non c'è installato il plug-in di Adobe Reader. In questo caso IE (non importa quale versione) non sa come renderlo e scaricherà semplicemente il file (Chrome, per esempio, ha il suo renderizzatore PDF incorporato).
Detto questo. L'iframe non è il modo migliore per visualizzare un PDF (non dimenticare la compatibilità con i browser mobili, per esempio Safari). Alcuni browser apriranno sempre quel file all'interno di un'applicazione esterna (o in un'altra finestra del browser). Il modo migliore e più compatibile che ho trovato è un po' complicato ma funziona su tutti i browser che ho provato (anche piuttosto datati):
Mantieni il tuo <iframe>
ma non visualizzare un PDF al suo interno, sarà riempito con una pagina HTML che consiste in un tag <object>
. Crea una pagina HTML avvolgente per il tuo PDF, dovrebbe apparire come questa:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Naturalmente hai ancora bisogno del plug-in appropriato installato nel browser. Dai anche un'occhiata a questo post se hai bisogno di supportare Safari sui dispositivi mobili.
<embed>
dentro <object>
? Troverai la risposta qui su SO. Invece del tag annidato <embed>
puoi (dovresti!) fornire un messaggio personalizzato per i tuoi utenti (o un visualizzatore integrato, vedi il prossimo paragrafo). Oggi <object>
può essere usato senza preoccupazioni e <embed>
è inutile.2°. Perché una pagina HTML? Così puoi fornire un fallback se il visualizzatore PDF non è supportato. Visualizzatore interno, semplici messaggi di errore HTML/opzioni e così via...
È difficile controllare il supporto PDF in modo da poter fornire un visualizzatore alternativo per i vostri clienti, date un'occhiata al progetto PDF.JS, è abbastanza buono ma la qualità del rendering - per i browser desktop - non è buona come quella di un renderer PDF nativo (non ho visto alcuna differenza nei browser mobili a causa delle dimensioni dello schermo, suppongo).
Se il browser ha un plugin pdf installato, esegue l'oggetto, altrimenti usa Google PDF Viewer per visualizzarlo come semplice HTML:
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
Il telaio
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Oggetto
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>