Aanbevolen manier om PDF in HTML in te sluiten?

Wat is de aanbevolen manier om PDF in HTML in te sluiten?

• iFrame?
• Voorwerp?
• Insluiten?

Wat zegt Adobe er zelf over?

In mijn geval wordt de pdf direct gegenereerd, zodat deze niet kan worden geüpload naar een oplossing van derden voordat deze wordt gewist.

Antwoord 1, autoriteit 100%

Waarschijnlijk is de beste aanpak om de PDF.JS-bibliotheek te gebruiken. Het is een pure HTML5/JavaScriptrenderer voor PDF-documenten zonder plug-ins van derden.

Online demo:
https://mozilla.github.io/pdf.js/web/viewer.html

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

Antwoord 2, autoriteit 91%

Dit is snel, gemakkelijk, to the point en vereist geen script van derden:

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

UPDATE (2/3/2021)

Adobe biedt nu zijn eigen PDF Embed API.

https://www.adobe.io/apis/documentcloud/ dcsdk/pdf-embed.html

UPDATE (1/2018):

De Chrome-browser op Android ondersteunt niet langer PDF-insluitingen. U kunt dit omzeilen door de Google Drive PDF-viewer te gebruiken

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

Antwoord 3, autoriteit 63%

U kunt hiervoor ook Google PDF-viewer gebruiken. Voor zover ik weet is het geen officiële Google-functie (heb ik het mis?), maar het werkt voor mij heel mooi en soepel. U moet uw PDF ergens eerder uploaden en gewoon de URL gebruiken:

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

Wat belangrijk is, is dat het geen Flash-speler nodig heeft, het gebruikt JavaScript.

Antwoord 4, autoriteit 22%

Je hebt enige controle over hoe de PDF in de browser wordt weergegeven door enkele opties in de queryreeks door te geven. Ik was blij dat dit werkte, totdat ik me realiseerde dat het niet werkt in IE8. 🙁

Het werkt in Chrome 9 en Firefox 3.6, maar in IE8 wordt het bericht ‘Voeg hier uw foutbericht in als de PDF niet kan worden weergegeven’ weergegeven.

Ik heb echter nog geen oudere versies van een van de bovenstaande browsers getest. Maar hier is de code die ik heb voor het geval iemand er iets aan heeft. Dit stelt de zoom in op 85%, verwijdert schuifbalken, werkbalken en navigatievensters. Ik zal mijn bericht bijwerken als ik iets tegenkom dat ook in IE werkt.

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

Antwoord 5, autoriteit 12%

Als u zowel <object>als <embed>gebruikt, krijgt u een breder scala aan browsercompatibiliteit.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="https://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>

Antwoord 6, autoriteit 4%

Converteer het naar PNG via ImageMagick en geef de PNG weer (snel en vies).

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

Dit is een goede optie als u een snelle oplossing nodig hebt, problemen met het bekijken van PDF’s in meerdere browsers wilt voorkomen en als de PDF slechts een of twee pagina’s is. Natuurlijk moet ImageMagick geïnstalleerd zijn (die op zijn beurt Ghostscript nodig heeft) op uw webserver, een optie die mogelijk niet beschikbaar is in shared hosting-omgevingen. Er is ook een PHP-plug-in (imagick genaamd) die zo werktmaar het heeft zijn eigen speciale vereisten.

Antwoord 7, autoriteit 4%

Kijk eens naar deze code- Om de PDF in HTML in te sluiten

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

Antwoord 8, autoriteit 3%

U kunt de relatieve locatie van de opgeslagen pdf als volgt gebruiken:

Voorbeeld1

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

Voorbeeld2

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

Antwoord 9, autoriteit 2%

FDViewcombineert PDF2SWF(die zelf is gebaseerd op xpdf) met een SWF-viewer zodat u PDF-documenten on-the-fly op uw server.

xpdf is geen perfecte PDF-converter. Als u betere resultaten nodig heeft, heeft Ghostviewenige mogelijkheid om PDF-documenten naar andere formaten te converteren die u misschien makkelijker een Flash-viewer voor kunnen bouwen.

Maar voor eenvoudige PDF-documenten zou FDView redelijk goed moeten werken.

Antwoord 10, autoriteit 2%

1. Maak een container voor uw PDF

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

2. Vertel PDFObjectwelke PDF moet worden ingesloten en waar deze moet worden ingesloten

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

3. U kunt optioneel CSS gebruiken om visuele stijl te specificeren, inclusief afmetingen, rand, marges, enz.

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

bron: https://pdfobject.com/

Antwoord 11, autoriteit 2%

Ons probleem is dat we om juridische redenen geen toestemming hebben om een ​​PDF tijdelijk op de harde schijf op te slaan. Bovendien mag niet de hele pagina opnieuw worden geladen bij het weergeven van een PDF als voorbeeld in de browser.

Eerst probeerden we PDF.jS. Het werkte met Base64 in de viewer voor Firefox en Chrome. Het was echter onaanvaardbaar traag voor onze PDF. IE/Edge werkte helemaal niet.

We hebben het daarom geprobeerd met een Base64-string in een HTML-objecttag. Ook dit werkte niet voor IE/Edge (misschien hetzelfde probleem als bij PDF.js). In Chrome/Firefox/Safari weer geen probleem.
Daarom hebben we gekozen voor een hybride oplossing. IE/Edge gebruiken we een IFrame en voor alle andere browsers de object-tag.

De IFrame-oplossing zou natuurlijk ook werken voor Chrome en co. De reden waarom we deze oplossing voor Chrome niet hebben gebruikt, is dat hoewel de PDF correct wordt weergegeven, Chrome een nieuw verzoek doet aan de server zodra u op “downloaden” klikt in het voorbeeld. Het vereiste verborgen veld pdfHelperTransferData(voor het verzenden van onze formuliergegevens die nodig zijn voor het genereren van PDF’s) is niet langer ingesteld omdat de PDF wordt weergegeven in een IFrame. Zie voor deze functie/bug Chrome verzendt twee verzoeken bij het downloaden van een PDF (en annuleert een daarvan).

Nu blijft het probleem dat kinderen IE9 en IE10 hebben. Hiervoor hebben we een preview-oplossing opgegeven en het document eenvoudig door op de preview-knop te klikken als download naar de gebruiker gestuurd (in plaats van de preview). We hebben veel geprobeerd, maar zelfs als we een oplossing hadden gevonden, zou de extra inspanning voor dit kleine deel van de gebruikers niet de moeite zijn geweest. Je kunt onze oplossing voor de download hier vinden: PDF downloaden zonder te vernieuwen met IFrame.

Ons 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);
            }
        })
 }

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

Om het browsertype voor IE/Edge te controleren, zie hier: Hoe kan ik Internet Explorer (IE) en Microsoft Edge detecteren met JavaScript? Ik hoop dat deze bevindingen iemand anders tijd zullen besparen.

Antwoord 12

Scribd vereist niet langer dat u uw documenten op hun server host. Als u een account bij hen aanmaakt, krijgt u een uitgever-ID. Er zijn maar een paar regels JavaScript-code nodig om PDF-bestanden te laden die op uw eigen server zijn opgeslagen.

Zie Ontwikkelaarstoolsvoor meer informatie.

Antwoord 13

PdfToImageServletmet ImageMagick’s convertcommando.

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

Antwoord 14

Zo deed ik het met AXIOSen 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)
        })

voeg urlPDF dynamisch toe aan HTML:

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

Antwoord 15

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

Antwoord 16

Een van de opties die u moet overwegen, is Opmerkelijke PDF
Het heeft een gratis abonnement, tenzij u van plan bent om in realtime online samen te werken aan pdf’s

Sluit het volgende iframein om het even welke html en geniet van de resultaten:

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

Antwoord 17

Ik moest een voorbeeld van een PDF bekijken met React, dus na verschillende bibliotheken geprobeerd te hebben, was mijn optimale oplossing om de gegevens op te halen en te embedden.

const pdfBase64 = //fetched from url or generated with jspdf or other library
  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

Antwoord 18

Om het bestand naar de browser te streamen, zie Stack Overflow-vraag Hoe een PDF-bestand als binair naar de browser te streamen met .NET 2.0– merk op dat, met kleine variaties, dit zou moeten werken, of je nu serveren van een bestand vanuit het bestandssysteem of dynamisch gegenereerd.

Dat gezegd hebbende, het MSDN-artikel waarnaar wordt verwezen, geeft een nogal simplistische kijk op de wereld, dus misschien wil je Succesvol een PDF naar de browser streamen via HTTPSen ook voor sommige van de headers die u mogelijk nodig hebt te leveren.

Als je die aanpak gebruikt, is een iframe waarschijnlijk de beste keuze. Zorg voor één webformulier dat het bestand streamt en plaats het iframe op een andere pagina met het kenmerk srcingesteld op het eerste formulier.

Antwoord 19

1. Construeer een blob van de ingevoerde PDF-bytes
2. Gebruik een iframeen PDF.jsgepatcht met deze cross-browser
   tijdelijke oplossing

De URI voor het iframe zou er ongeveer zo uit moeten zien:

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

Nu geven FF, Chrome, IE 11 en Edge de pdf allemaal weer in een viewer in het iframe dat wordt doorgegeven via de standaard blob-URI in de URL.

Antwoord 20

Ik ontdekte dat de beste manier om een ​​pdf voor mijn geval in te sluiten, was door bootstrapomdat het niet alleen de pdf toont, maar ook de beschikbare ruimte vult en u de verhouding naar wens kunt specificeren. Hier is een voorbeeld van wat ik ermee heb gemaakt:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="https://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<embed src="data:application/pdf;base64,..."/>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudPDF Viewer</title>
  <style>
    body, html {
      height: 100%;
      margin: 0px;
    }
  </style>
</head>
<body style="height: 100%">
  <div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
  <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true,
      };
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {
      });
    });
  </script>
 </body>
</html>

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