Modo consigliato per incorporare PDF in HTML?

Qual è il modo consigliato per incorporare PDF in HTML?

• iFrame?
• Oggetto?
• Incorporare?

Cosa si dice Adobe al riguardo?

Nel mio caso, il PDF viene generato al volo, quindi non può essere caricato su una soluzione di terze parti prima di scaricarlo.

Probabilmente l'approccio migliore è usare la libreria PDF.JS. È un puro renderizzatore HTML5 / JavaScript per documenti PDF senza plug-in di terze parti.

Demo online: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

Questo è veloce, facile, al punto e non richiede alcuno script di terze parti:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

AGGIORNAMENTO (1/2018):

Il browser Chrome su Android non supporta più gli incorporamenti PDF. Puoi aggirare il problema utilizzando il visualizzatore PDF di Google Drive

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

A questo scopo puoi anche utilizzare il visualizzatore di Google PDF. Per quanto ne so non è una funzione ufficiale di Google (mi sbaglio su questo?), Ma funziona per me molto bene e senza intoppi. Devi caricare il tuo PDF da qualche parte prima e usare semplicemente il suo URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Ciò che è importante è che non ha bisogno di un lettore Flash, utilizza JavaScript.

Hai un certo controllo su come appare il PDF nel browser passando alcune opzioni nella stringa di query. Sono stato felice di questo lavoro, fino a quando ho capito che non funziona in IE8. :(

Funziona in Chrome 9 e Firefox 3.6, ma in IE8 mostra il messaggio "Inserisci qui il tuo messaggio di errore, se il PDF non può essere visualizzato".

Non ho ancora testato le versioni precedenti di nessuno dei browser di cui sopra. Ma ecco il codice che ho comunque nel caso in cui aiuti qualcuno. Questo imposta lo zoom all'85%, rimuove barre di scorrimento, barre degli strumenti e pannelli di navigazione. Aggiornerò il mio post se trovo qualcosa che funziona anche in IE.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

Usando entrambi <object>e <embed>ti darà una più ampia gamma di compatibilità del browser.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

Convertilo in PNG tramite ImageMagick e visualizza il PNG (veloce e sporco).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

Questa è una buona opzione se hai bisogno di una soluzione rapida, vuoi evitare problemi di visualizzazione PDF tra browser e se il PDF è solo una o due pagine. Ovviamente, hai bisogno di ImageMagick installato (che a sua volta necessita di Ghostscript) sul tuo server web, un'opzione che potrebbe non essere disponibile negli ambienti di hosting condivisi. C'è anche un plugin PHP (chiamato imagick) che funziona in questo modo ma ha i suoi requisiti speciali.

Dai un'occhiata a questo codice: per incorporare il PDF in HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

FDView combina PDF2SWF (che a sua volta si basa su xpdf ) con un visualizzatore SWF in modo da poter convertire e incorporare documenti PDF al volo sul tuo server.

xpdf non è un convertitore PDF perfetto. Se hai bisogno di risultati migliori, Ghostview ha una certa capacità di convertire documenti PDF in altri formati per i quali potresti essere in grado di creare più facilmente un visualizzatore Flash.

Ma per semplici documenti PDF, FDView dovrebbe funzionare abbastanza bene.

Il nostro problema è che per motivi legali non è consentito archiviare temporaneamente un PDF sul disco rigido . Inoltre, l'intera pagina non deve essere ricaricata quando si visualizza un PDF come Anteprima nel browser.

Per prima cosa abbiamo provato PDF.jS. Ha funzionato con Base64 nel visualizzatore per Firefox e Chrome. Tuttavia, è stato inaccettabilmente lento per il nostro PDF. IE / Edge non ha funzionato affatto.

Lo abbiamo quindi provato con una stringa Base64 in un tag di oggetto HTML. Anche questo non ha funzionato per IE / Edge (forse lo stesso problema con PDF.js). In Chrome / Firefox / Safari di nuovo nessun problema. Ecco perché abbiamo scelto una soluzione ibrida. IE / Edge usiamo un IFrame e per tutti gli altri browser il tag oggetto.

Naturalmente la soluzione IFrame funzionerebbe anche per Chrome e co. Il motivo per cui non abbiamo utilizzato questa soluzione per Chrome è che sebbene il PDF sia visualizzato correttamente, Chrome invia una nuova richiesta al server non appena si fa clic su "download" nell'anteprima . Il file pdfHelperTransferData campo nascosto (per l'invio dei dati del nostro modulo necessari per la generazione di PDF) non è più impostato perché il PDF viene visualizzato in un IFrame. Per questa funzione / bug vediChrome invia due richieste durante il download di un PDF (e ne cancella una) .

Ora rimangono i problemi relativi ai bambini IE9 e IE10. Per questi abbiamo rinunciato a una soluzione di anteprima e abbiamo semplicemente inviato il documento facendo clic sul pulsante di anteprima come download per l'utente (anziché l'anteprima). Abbiamo provato molto, ma anche se avessimo trovato una soluzione lo sforzo extra per questa piccola parte degli utenti non sarebbe valsa la pena. Puoi trovare la nostra soluzione per il download qui: Scarica PDF senza aggiornamento con IFrame .

Il nostro Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Il nostro HTML:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

Per verificare il tipo di browser per IE / Edge vedere qui: Come posso rilevare Internet Explorer (IE) e Microsoft Edge usando JavaScript? Spero che questi risultati salveranno qualcun altro il tempo.

È possibile utilizzare la posizione relativa del pdf salvato in questo modo:

Esempio 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Esempio 2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

1. Crea un contenitore per contenere il tuo PDF

   <div id="example1"></div>

2. Indica a PDFObject quale PDF incorporare e dove incorporarlo

   <script src="/js/pdfobject.js"></script>
   <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. Opzionalmente puoi usare CSS per specificare lo stile visivo, inclusi dimensioni, bordo, margini, ecc.

   <style>
   .pdfobject-container { height: 500px;}
   .pdfobject { border: 1px solid #666; }
   </style>

fonte: https://pdfobject.com/

Scribd non ti richiede più di ospitare i tuoi documenti sul loro server. Se crei un account con loro in modo da ottenere un ID editore. Bastano poche righe di codice JavaScript per caricare i file PDF memorizzati sul proprio server.

Per ulteriori dettagli, consultare Strumenti per sviluppatori .

<object width="400" height="400" data="helloworld.pdf"></object>

PdfToImageServlet usando il convertcomando di ImageMagick .

Esempio di utilizzo: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

Questo è il modo in cui ho fatto con AXIOS e Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

aggiungi urlPDF in modo dinamico all'HTML:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

Una delle opzioni che dovresti considerare è Notable PDF
Ha un piano gratuito a meno che tu non abbia intenzione di fare una collaborazione online in tempo reale su pdf

Incorpora quanto segue iframein qualsiasi HTML e goditi i risultati:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

Per eseguire lo streaming del file sul browser, vedere Domanda di overflow dello stack Come eseguire lo streaming di un file PDF come binario sul browser utilizzando .NET 2.0 ; tenere presente che, con variazioni minori, questo dovrebbe funzionare indipendentemente dal fatto che si stia offrendo un file dal file system o generato dinamicamente.

Detto questo, l'articolo di MSDN a cui viene fatto riferimento ha una visione piuttosto semplicistica del mondo, quindi potresti voler leggere con successo lo streaming di un PDF sul browser tramite HTTPS e per alcune delle intestazioni che potresti dover fornire.

Usando questo approccio, un iframe è probabilmente il modo migliore per andare. Avere un modulo web che trasmette il file in streaming, quindi inserire l'iframe in un'altra pagina con l' srcattributo impostato sul primo modulo.

1. Costruire un BLOB dei byte PDF di input
2. Utilizzare un iframe e PDF.js corretti con questa soluzione alternativa per browser

L'URI per l'iframe dovrebbe assomigliare a questo:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Ora FF, Chrome, IE 11 e Edge visualizzano tutti il ​​PDF in un visualizzatore nell'iframe passato tramite URI BLOB standard nell'URL.

Ho dovuto visualizzare l'anteprima di un PDF con React, quindi dopo aver provato diverse librerie la mia soluzione ottimale era quella di recuperare i dati e salvarli.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

Se non desideri ospitare PDF.JS da solo, puoi provare DocDroid . È simile al visualizzatore PDF di Google Drive ma consente il branding personalizzato.

basta usare iFrame per i PDF.

Avevo esigenze specifiche nella mia app React.js, ho provato milioni di soluzioni ma ho finito con un iFrame :) Buona fortuna!

Ho trovato che funziona bene e il browser lo gestisce in Firefox. Non ho controllato IE ...

<script>window.location='url'</script>