Zalecany sposób osadzania PDF w HTML?

To jest szybkie, proste, do rzeczy i nie wymaga skryptów innych firm:

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

Aktualizacja (1/2018):

Przeglądarka Chrome na Androida nie obsługuje już osadzania plików PDF. Możesz obejść to za pomocą przeglądarki Google Drive PDF Viewer

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

Możesz również użyć Google PDF viewer do tego celu. Z tego co wiem to nie jest oficjalna funkcja Google (czy się mylę?), ale u mnie działa bardzo ładnie i płynnie. Musisz przesłać gdzieś swój plik PDF i po prostu użyć jego adresu URL:

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

Ważne jest to, że nie potrzebuje Flash Playera, używa JavaScript.

Masz pewną kontrolę nad tym, jak plik PDF pojawia się w przeglądarce, przekazując niektóre opcje w ciągu zapytania. Byłem szczęśliwy, że to działa, dopóki nie zdałem sobie sprawę, że nie działa w IE8. :(

Działa w Chrome 9 i Firefox 3.6, ale w IE8 wyświetla komunikat " Wstaw tutaj swój komunikat o błędzie, jeśli plik PDF nie może być wyświetlony."

Nie testowałem jeszcze starszych wersji żadnej z powyższych przeglądarek. Ale oto kod, który mam, na wypadek, gdyby komuś pomógł. To ustawia Powiększ do 85%, usuwa paski przewijania, paski narzędzi i panele nawigacji. Zaktualizuję mój post, jeśli natknę się na coś, co działa również w 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>

Użycie zarówno <object>, jak i <embed> zapewni szerszy zakres kompatybilności przeglądarki.

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

Przekonwertuj go do PNG za pomocą ImageMagick i wyświetl PNG (szybko i brudnie).

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

Jest to dobra opcja, jeśli potrzebujesz szybkiego rozwiązania, chcesz uniknąć problemów z przeglądaniem plików PDF w różnych przeglądarkach i jeśli plik PDF jest tylko stroną lub dwiema. Oczywiście musisz zainstalować ImageMagick (który z kolei wymaga Ghostscript) na serwerze WWW, opcja, która może nie być dostępna we współdzielonych środowiskach hostingowych. Istnieje również wtyczka PHP (o nazwie imagick), która działa tak jak Ta , ale ma własne specjalne wymagania.

Poszukaj tego kodu - aby osadzić plik PDF w 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 łączy PDF2SWF (który sam jest oparty na xpdf) z przeglądarką SWF, dzięki czemu można konwertować i osadzać dokumenty PDF w locie na serwerze.

Xpdf nie jest idealnym konwerterem PDF. Jeśli potrzebujesz lepszych wyników, Ghostview ma pewną zdolność do konwersji dokumentów PDF do innych formatów, dla których możesz łatwiej zbudować przeglądarkę Flash.

Ale w przypadku prostych dokumentów PDF fdview powinien działać rozsądnie cóż.

Scribd nie wymaga już hostowania dokumentów na swoim serwerze. Jeśli utworzysz konto z nimi, otrzymasz identyfikator wydawcy. Wystarczy kilka linijek kodu JavaScript, aby załadować pliki PDF przechowywane na własnym serwerze.

Aby uzyskać więcej informacji, zobacz Narzędzia programistyczne.

1. Utwórz kontener do przechowywania pliku PDF

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

2. Powiedz PDFObject, który plik PDF należy osadzić i gdzie go osadzić

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

3. Opcjonalnie możesz użyć CSS do określenia stylizacji wizualnej, w tym wymiarów, obramowania, marginesów itp.

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

Źródło: https://pdfobject.com/

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

Jedną z opcji, którą powinieneś rozważyć, jest GODNY UWAGI PDF
Ma bezpłatny plan, chyba że planujesz współpracę online w czasie rzeczywistym na plikach PDF [6]}

Umieść następujący iframe w dowolnym html i ciesz się wynikami:

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

Problem polega na tym, że nie możemy zapisać żadnych danych ze względów prawnych. Więc musimy pracować ze strumieniami i tym podobne bez zapisywania plików PDF do systemu plików. Z kilku powodów strona nie powinna się przeładowywać podczas pobierania lub wyświetlania pliku PDF.

Najpierw próbowaliśmy z PDF.JS z powodu sugestii @Lubos hasko: udało nam się użyć Base64 z przeglądarką. To działało w Firefox i Chrome. Ale i tak było bardzo powoli. IE / Edge w ogóle nie działał dla nas.

Wyświetlacz Z ciągu PDF-Base64 w znaczniku obiektowym nie zadziałało u nas w przeglądarce Microsoft (IE / Edge), ale bardzo dobrze w Chrome/Firefox/Safari. Dla IE11 / Edge, użyliśmy Ramki IFrame do wyświetlenia strumienia PDF. Działa dobrze, a wysiłek konserwacyjny jest utrzymywany w granicach. Dla IE9 / IE10 po prostu wysyłamy plik jako download-stream, ponieważ nie działa zbyt dobrze z tymi przeglądarkami w połączeniu z iframe. Użytkownik nie ma luksusu pokazywania pdf w modal-box-preview, który jest ok dla ilość naszych klientów korzystających z tych przeglądarek (około 1%). Nasze rozwiązanie do pobierania znajdziesz tutaj: Pobierz plik PDF bez odświeżania za pomocą IFrame .

Powodem, dla którego nie używamy rozwiązania IFrame dla wszystkich przeglądarek, jest to, że chociaż plik PDF jest wyświetlany poprawnie we wszystkich naszych testowanych przeglądarkach, Chrome wysyła kolejne żądanie do funkcji serwera, gdy tylko chcesz pobrać plik PDF w Chrome-PDF Reader. Ukryte pole pdfHelperTransferData nie jest dłuższe ustawienie, ponieważ plik PDF jest wyświetlany w ramce IFrame, więc parametr w funkcji po stronie serwera to null. Dla tej "funkcji/błędu" zobacz Chrome wysyła dwa żądania podczas pobierania pliku PDF (i anuluje jedno z nich).

Nasz Javascript

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

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

Aby sprawdzić Microsoft-Browser Zobacz na przykład: Jak mogę wykryć Internet Explorer (IE) i Microsoft Edge przy użyciu JavaScript? mam nadzieję, że te odkrycia uratują kogoś innego czas.

PdfToImageServlet za pomocą polecenia ImageMagick convert.

Przykład użycia: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

Aby przesłać plik do przeglądarki, zobacz pytanie przepełnienie stosu Jak streamować plik PDF jako plik binarny do przeglądarki za pomocą. NET 2.0 - zauważ, że z niewielkimi zmianami powinno to działać niezależnie od tego, czy obsługujesz Plik z systemu plików, czy generowany dynamicznie.

Mając to na uwadze, przywołany artykuł MSDN przyjmuje dość uproszczony pogląd na świat, więc możesz przeczytać udane przesyłanie plików PDF do przeglądarki za pomocą protokołu HTTPS jak również dla niektóre nagłówki, które możesz potrzebować dostarczyć.

Używając tego podejścia, iframe jest prawdopodobnie najlepszym sposobem. Posiada jeden formularz internetowy, który przesyła plik, a następnie umieść ramkę iframe na innej stronie z atrybutem src ustawionym na pierwszy formularz.

1. Konstruuj blob wejściowych bajtów PDF
2. Użyj iframe i PDF.js patched with this cross browser workaround

URI dla iframe powinien wyglądać mniej więcej tak:

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

Teraz FF, Chrome, IE 11 i Edge wyświetlają plik PDF w przeglądarce w ramce iframe przekazanej przez Standardowy Uri blob w adresie URL.

Jeśli nie chcesz hostować plików PDF.JS na własną rękę, możesz spróbować DocDroid . Jest podobny do przeglądarki Google Drive PDF, ale pozwala na niestandardowy branding.

Tak zrobiłem z AXIOS i 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)
        })

Dodaj urlpdf dynamicznie do HTML:

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

Jeśli możesz przekonwertować plik pdf na obraz, przejdź do https://www.base64-image.de Umieść swój obraz w środku, a przekonwertuje go do base64 dla Ciebie. Następnie umieść kod w znaczniku obrazu.

Znalazłem to działa dobrze i przeglądarka obsługuje go w Firefoksie. Nie sprawdzałem IE...

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