Zalecany sposób osadzania plików PDF w HTML?

Jaki jest zalecany sposób osadzania plików PDF w HTML?

• iFrame?
• Obiekt?
• Osadzać?

Co mówi o tym Adobe?

W moim przypadku plik PDF jest generowany w locie, więc nie można go przesłać do rozwiązania innej firmy przed jego opróżnieniem.

Prawdopodobnie najlepszym rozwiązaniem jest użycie biblioteki PDF.JS. Jest to czysty renderer HTML5 / JavaScript dla dokumentów PDF bez żadnych wtyczek innych firm.

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

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

Jest to szybkie, łatwe do rzeczy i nie wymaga żadnego skryptu innej firmy:

<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 to obejść, korzystając z przeglądarki plików PDF na Dysku Google

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

W tym celu możesz również użyć przeglądarki Google PDF. O ile wiem, nie jest to oficjalna funkcja Google (czy mam rację?), Ale działa dla mnie 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 wyglądem pliku PDF w przeglądarce, przekazując niektóre opcje w ciągu zapytania. Byłem szczęśliwy z tego działania, dopóki nie zdałem sobie sprawy, że nie działa w IE8. :(

Działa w Chrome 9 i Firefox 3.6, ale w IE8 wyświetla komunikat „Wstaw tutaj komunikat o błędzie, jeśli nie można wyświetlić pliku PDF”.

Jednak nie testowałem jeszcze starszych wersji żadnej z powyższych przeglądarek. Ale oto i tak mam kod na wypadek, gdyby komukolwiek to pomogło. To ustawia powiększenie na 85%, usuwa paski przewijania, paski narzędzi i panele nawigacyjne. Zaktualizuję mój post, jeśli napotkam 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>

Korzystanie z obu <object>i <embed>daje 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>

Konwertuj go na PNG za pomocą ImageMagick i wyświetl PNG (szybki i brudny).

<?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 to tylko jedna lub dwie strony. Oczywiście potrzebujesz zainstalowanego ImageMagick (który z kolei wymaga Ghostscript) na twoim serwerze, 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 w ten sposób, ale ma swoje własne specjalne wymagania.

Spójrz na ten kod - 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 opiera się na xpdf ) z przeglądarką SWF, dzięki czemu możesz konwertować i osadzać dokumenty PDF w locie na serwerze.

xpdf nie jest idealnym konwerterem PDF. Jeśli potrzebujesz lepszych rezultatów, Ghostview ma możliwość konwertowania dokumentów PDF na inne formaty, dla których możesz łatwiej zbudować przeglądarkę Flash.

Ale w przypadku prostych dokumentów PDF FDView powinien działać dość dobrze.

Naszym problemem jest to, że ze względów prawnych nie możemy tymczasowo przechowywać pliku PDF na dysku twardym . Ponadto nie należy ponownie ładować całej strony podczas wyświetlania pliku PDF jako podglądu w przeglądarce.

Najpierw wypróbowaliśmy PDF.jS. Współdziałał z Base64 w przeglądarce Firefox i Chrome. Jednak dla naszego pliku PDF było to niedopuszczalnie wolne. IE / Edge w ogóle nie działał.

Dlatego wypróbowaliśmy go przy użyciu ciągu Base64 w znaczniku obiektu HTML. To znowu nie działało dla IE / Edge (może ten sam problem jak w przypadku PDF.js). W Chrome / Firefox / Safari ponownie nie ma problemu. Dlatego wybraliśmy rozwiązanie hybrydowe. IE / Edge używamy IFrame, a dla wszystkich innych przeglądarek tag obiektowy.

Rozwiązanie IFrame oczywiście działałoby również w Chrome i spółce. Powodem, dla którego nie korzystaliśmy z tego rozwiązania dla Chrome, jest to, że chociaż plik PDF jest wyświetlany poprawnie, Chrome wysyła nowe żądanie do serwera, jak tylko klikniesz „pobierz” w podglądzie . Wymagane pdfHelperTransferData z ukrytego pola (do wysyłania danych formularza potrzebnych do generowania PDF) nie jest już ustawione, ponieważ plik PDF jest wyświetlany w ramce IFrame. Aby zobaczyć tę funkcję / błąd zobaczChrome wysyła dwa żądania podczas pobierania pliku PDF (i anuluje jedno z nich) .

Teraz problem dzieci IE9 i IE10 pozostają. W tym celu zrezygnowaliśmy z podglądu i po prostu wysyłamy dokument, klikając przycisk podglądu jako plik do pobrania dla użytkownika (zamiast podglądu). Wiele próbowaliśmy, ale nawet gdybyśmy znaleźli rozwiązanie, dodatkowy wysiłek dla tej niewielkiej części użytkowników nie byłby wart wysiłku. Nasze rozwiązanie do pobrania znajdziesz tutaj: Pobierz plik PDF bez odświeżania za pomocą IFrame .

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

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ć typ przeglądarki dla IE / Edge, zobacz tutaj: Jak mogę wykryć Internet Explorer (IE) i Microsoft Edge za pomocą JavaScript? Mam nadzieję, że te odkrycia uratują komuś czas.

1. Utwórz pojemnik do przechowywania pliku PDF

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

2. Powiedz PDFObject, który plik PDF ma zostać osadzony 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, aby określić styl wizualny, w tym wymiary, obramowanie, marginesy itp.

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

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

Możesz użyć względnej lokalizacji zapisanego pliku PDF w następujący sposób:

Przykład 1

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

Przykład 2

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

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

Aby uzyskać więcej informacji, zobacz Narzędzia dla programistów .

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

PdfToImageServlet przy użyciu ImageMagick'sconvert polecenia .

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

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

dynamicznie dodaj urlPDF do HTML:

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

Jedną z opcji, które należy wziąć pod uwagę, jest znaczący plik PDF
Ma bezpłatny plan, chyba że planujesz współpracę online w czasie rzeczywistym na plikach pdf

Osadź następujące elementy iframew dowolnym pliku HTML i ciesz się wynikami:

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

Aby przesłać strumieniowo plik do przeglądarki, zobacz pytanie Przepełnienie stosu Jak przesyłać strumieniowo plik PDF jako plik binarny do przeglądarki przy użyciu .NET 2.0 - zwróć uwagę, że przy niewielkich zmianach powinno to działać niezależnie od tego, czy podajesz plik z systemu plików lub generowane dynamicznie.

Powiedziawszy to, artykuł MSDN, o którym mowa, ma raczej uproszczony widok na świat, więc możesz przeczytać Pomyślnie Streamuj plik PDF do przeglądarki za pośrednictwem HTTPS, a także w przypadku niektórych nagłówków, które możesz potrzebować.

Przy takim podejściu iframe jest prawdopodobnie najlepszą drogą. Jeden formularz internetowy przesyłający strumieniowo plik, a następnie umieść element iframe na innej stronie z srcatrybutem ustawionym na pierwszą formę.

1. Skonstruuj obiekt blob wejściowych bajtów PDF
2. Użyj iframe i pliku PDF.js załatanego z tym obejściem przeglądarki

Identyfikator URI dla elementu 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ą pliki PDF w przeglądarce w ramce iframe przekazywanej przez standardowy identyfikator URI obiektu blob w adresie URL.

Jeśli nie chcesz hostować pliku PDF.JS na własną rękę, możesz wypróbować DocDroid . Jest podobny do przeglądarki plików PDF na Dysku Google, ale umożliwia niestandardowe budowanie marki.

Musiałem wyświetlić podgląd pliku PDF za pomocą React, więc po wypróbowaniu kilku bibliotek moim optymalnym rozwiązaniem było pobranie danych i ebmed.

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

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

Przekonałem się, że to działa dobrze, a przeglądarka obsługuje to w Firefox. Nie sprawdziłem IE ...

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