Come incorporare un visualizzatore di PDF in una pagina?

Se non sbaglio, Google Docs offre i mezzi per visualizzare un PDF che è memorizzato sullo stesso server della pagina web tramite un <iframe>, ma ho bisogno di sapere come posso farlo in modo compatibile con tutti i browser.

Potresti prendere in considerazione l'utilizzo di PDFObject di Philip Hutchison.

In alternativa, se stai cercando una soluzione non JavaScript, puoi utilizzare il markup in questo modo:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

PDF.js è un esperimento tecnologico HTML5 che esplora la creazione di un renderer PDF (Portable Document Format) fedele ed efficiente senza l'assistenza del codice nativo. È gestito dalla comunità e supportato da Mozilla Labs.

Puoi vedere la demo qui .

Questo potrebbe funzionare un po 'meglio in questo modo

<embed src= "MyHome.pdf" width= "500" height= "375">

Se non sbaglio, l'OP stava chiedendo (sebbene in seguito abbia accettato una soluzione .js) se il server di visualizzazione PDF incorporato di Google visualizzerà un PDF sul proprio sito web.

Quindi, un anno e mezzo dopo: sì, lo farà.

Vedi http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Inoltre, consulta https://docs.google.com/viewer e collega l'URL del file che desideri visualizzare.

Modifica: rileggendo, OP chiedeva soluzioni che non usassero iFrame. Non credo sia possibile con il visualizzatore di Google.

prova con Flex Paper http://flexpaper.devaldi.com/

funziona come scribd

Assicurati di testare qualsiasi soluzione su diverse preferenze di Reader. Un visitatore del sito potrebbe avere il browser impostato per aprire il PDF in Reader / Acrobat invece che nel browser, ad esempio, disabilitando il plug-in Acrobat in Firefox.

Non posso essere sicuro dei miei risultati, perché ho due diversi plugin di Acrobat che Firefox riconosce perché ho versioni diverse di Adobe Acrobat e Adobe Reader, ma sembra che tu abbia almeno bisogno di testare cosa succede se un visitatore del sito web ha il browser impostato per non aprire il PDF nel browser. Potrebbe essere abbastanza fastidioso quando guardano quella che sembra essere una pagina web altrimenti utilizzabile e il loro browser li assilla per aprire un file PDF che pensano di non aver richiesto. In alcuni casi, il file PDF si è aperto spontaneamente in Adobe Reader, non nel browser, e in altri casi il browser ha visualizzato una finestra di dialogo dicendo che il file non esisteva.

Mi sono imbattuto in tali mancate corrispondenze con iframe e object entrambi, problemi diversi per codice diverso.

Questo è per un semplice codice HTML. Non ho provato i framework suggeriti.

Opterei davvero per FlowPaper, in particolare la loro nuova modalità Elements che può essere trovata qui: https://flowpaper.com/demo/

Appiattisce i PDF in modo significativo e allo stesso tempo mantiene il testo nitido, il che significa che verrà caricato molto più velocemente sui dispositivi mobili

usando bootstrap puoi avere un primo file di incorporamento mobile e reattivo.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

pdf2htmlEX di coolwanglu è probabilmente la migliore soluzione disponibile per convertire un file pdf in html. Potresti fare una semplice conversione e poi incorporare la pagina html come iframe o qualcosa di simile.