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

1181

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.

Daniel Silveira
źródło
6
Spróbuj pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX
Tezcat
Na stronie wiki repozytorium pdf2htmlEX znajduje się świetne porównanie nie tylko konkretnych rozwiązań, ale także ogólnych strategii . Ponadto, chociaż nie próbowałem go, to wydaje się być utrzymane widelec.
ShreevatsaR

Odpowiedzi:

541

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

lubos hasko
źródło
12
Jak zauważono w innej odpowiedzi, scribd faktycznie używa pdf2swf do konwersji plików pdf
Peter Craig,
8
Zdecydowanie odradzam używanie scribd - właśnie przeprowadziłem eksperyment na konkretnym dokumencie, aw Firefoksie 4 wyświetla on tylko pierwsze 3 strony, podczas gdy w IE9 źle renderuje tekst - przesunął niektóre sekcje strony. Więc technicznie rzecz biorąc, jest wadliwy. Dodatkowo oczekują, że zasubskrybujesz druk lub pobieranie dokumentów! Zasadniczo biorą wcześniej bezpłatne dokumenty i wznoszą wokół nich zaporę.
frankster
9
Biblioteka PDF.js faktycznie wygląda na bardzo dobre rozwiązanie, chociaż połączone demo nie pokazuje jej osadzonej na stronie (zajmuje całą stronę). Ale wykorzystuje płótno HMTL5, więc powinno być łatwe do osadzenia i jest szybkie . Z drugiej strony, potrzeba trochę js, w przeciwieństwie do <object>: github.com/mozilla/pdf.js/blob/master/examples/helloworld/...
LarsH
33
Plik pdf.js działa słabo w przeglądarkach tabletów, takich jak Chrome. Uważam też, że jest to bardzo, bardzo powolne w przypadku większych dokumentów pdf.
Rocco The Taco,
10
Nie mogę uwierzyć, że jest to zalecane. Spójrz na renderowanie czcionek w demonstracji online, wyglądają na postrzępione i okropne. Wygląda znacznie lepiej z renderowaniem subpikseli po otwarciu w czytniku Adobe.
Speedplane
530

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">
Batfan
źródło
30
Lepiej użyć tagu <object>, aby można było zastosować rezerwę.
Jonathon Hill
1
Myślałem, że programiści chcieliby wiedzieć, że Mac / Firefox dostaje uszkodzony obraz wtyczki. Strona wtyczki nie załaduje szukanej wtyczki. Jakieś pomysły na obejście tego?
Shanimal
62
jeśli chcesz się upewnić, że pojawi się ono zamiast automatycznego pobierania pliku pdf (tak jak mi się type='application/pdf'
zdarza
31
Lepiej używać <object>tagu, ponieważ może wyświetlać alternatywną treść w przeglądarkach, które nie wyświetlają plików pdf. Możesz nawet umieścić <embed>tag w <object>tagu, jeśli chcesz. Ref: stackoverflow.com/questions/1244788/embed-vs-object
Raphael
1
@raphaelcm W rzeczywistości, jak powiedziałem wcześniej, samo użycie tagu osadzania działa we wszystkich głównych przeglądarkach. Nawet IE 7 i 8.
Batfan,
360

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.

Łukasz Korzybski
źródło
29
Jedną rzeczą, o której należy wspomnieć, jest to, że istnieje górna granica wielkości pliku PDF, który można wyświetlić. Myślę, że obecnie jest to 10 MB / 100 stron. PS: Nie sądzę, aby widz był „nieoficjalny”; mają nawet stronę z instrukcjami, która tworzy dla Ciebie osadzony adres URL: docs.google.com/viewer
SuperElectric
30
Ta opcja działa świetnie, ale musisz udostępnić swoje pliki PDF publicznie, co dla mnie nie zawsze jest opcją.
KoviNET
4
@riot_starter to rozwiązanie nie działa, jeśli jesteś całkowicie wylogowany z Google, ładuje się dobrze, jeśli jesteś w pełni zalogowany, ładuje się dobrze, jednak jeśli jesteś pomiędzy (cokolwiek to znaczy), prosi o podanie hasła. A w przypadku iframe po prostu się nie ładuje.
dwenaus
5
Masz prawo, aby ustawić prywatność jakiejkolwiek między Google Docs public, sign-in requiredi private. Jest to zdecydowanie funkcja oficjalna, biorąc pod uwagę, że każdy dokument w Dokumentach Google ma embedopcję.
b1nary.atr0phy
6
Inną rzeczą, o której należy wspomnieć, jest ostrzeżenie „ostatnio wysłałeś zbyt wiele żądań”, co stanowi ograniczenie.
kommradHomer
115

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>
Gayle
źródło
6
To najlepsze rozwiązanie, ponieważ wykorzystuje możliwości przeglądarki, a nie skomplikowane rozwiązanie innej firmy. We wszystkich nowoczesnych przeglądarkach (IE9, FF lub Chrome) PDF powinien ładnie się osadzać. Przepraszamy za użytkowników IE 6/7. Muszą zaktualizować. Już dawno przestaliśmy obsługiwać te przeglądarki. :(
Adrian P.
2
Nie działa na mojej wersji mobilnego tabletu z Chrome .. FYI ... szkoda, byłby to szybki problem.
Rocco The Taco,
1
+1 za adresowanie opcji powiększania i przewijania, nie działa to jednak w najnowszej wersji Chrome (44) ... Nie udało się załadować dokumentu PDF.
NotJay,
Czy można dodać przycisk zamykania? i jak?
Roberto Sepúlveda Bravo
@RoccoTheTaco Seconded, nie działa na mobilnym chrome na Androidzie
Anonimowy
65

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>
Suneel Kumar
źródło
4
To nie zadziała w przeglądarkach, jeśli dodatek pdf nie zostanie zainstalowany lub nieaktualny
Umair Hamid
Nie będzie to również sprawdzać poprawności dla tych, którzy są zainteresowani sprawdzaniem poprawności kodu.
NotJay,
1
Działa to dla mnie świetnie, podczas gdy używanie embedtagu jako takiego zostało uznane unsafeprzez Chrome i Firefox.
Richie Thomas,
1
Z jakiegoś powodu na Androidzie (chrome) nie osadza pliku PDF, a zamiast tego oferuje go do pobrania. Na iPhonie (safari) pokazuje tylko pierwszą stronę pliku PDF.
Ivan Rubinson
21

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.

Dan Mantyla
źródło
Lub przekonwertuj obraz do formatu PNG za pomocą aplikacji, takiej jak Preview na Macu.
Garrett,
2
ale czy możesz to zrobić programowo?
Dan Mantyla,
co jeśli dokument ma więcej niż 1 stronę? Chyba będzie można pokazać tylko pierwszą stronę, a następnie
seb
@seb minęło trochę czasu, ale mogłem go używać w plikach PDF o długości 2 lub 3 stron. Nie byłoby mądrzejsze, aby pójść znacznie dalej, myślę, że przeglądarki mobilne mają trudności z wyświetlaniem takich obrazów. Właśnie dlatego nazwałem ją „szybką i brudną” metodą, ale myślę, że jest to dobra metoda, o ile plik PDF ma nie więcej niż kilka stron.
Dan Mantyla
1
Jeśli otworzysz plik PDF za pomocą biblioteki zend, możesz zrobić a foreach($pdf->pages as $page)i utworzyć obraz dla każdej strony
99 problemów - Składnia to nie jedna
18

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>
AMIT
źródło
6
To nie działa. Zawsze kończę na pustym szarym ekranie zamiast pdf. Ale zamiana srcna data, jak w odpowiedzi @ Gayle, działa.
Mottie
1
Używam Chrome 44 i nie będzie działać. Próbowałem także zmienić dane na src.
NotJay,
type = "application / pdf" rozwiązuje problem. Działa dobrze w chromie.
Gavin Simpson
13

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.

Adam Davis
źródło
Czy FDView jest dostępny nigdzie indziej? Wydaje się, że code4net.com zniknął.
Michael Myers
@Michael Nie, że mogę łatwo znaleźć. Pozostawię tę odpowiedź na wypadek, gdyby ktoś ponownie hostował program fdview w innym miejscu.
Adam Davis,
12

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.

George Maharis
źródło
Przykro mi, ale nie rozumiem, jaką wartość ma zmienna „transferData”?
Kate
1
Cześć @ Kate, W naszym przypadku generujemy plik PDF na podstawie danych wejściowych użytkownika w naszym formularzu internetowym. „transferData” zawiera dane przesyłane jako JSON do funkcji generowania plików PDF w internetowym interfejsie API. Dodałem wiersz więcej kodu w celu wyjaśnienia.
George Maharis,
10
  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/

Powiedział Bouigherdaine
źródło
To było bardzo dobre rozwiązanie i działało dobrze w połączeniu ze stylem bootstrap. Wszystko poszło na inne elementy bootstrapu.
netfed
Czy próbowałeś z plikiem blob? Użyłem tego z pdf.output('bloburl')lib jspdf, ale wydaje się, że nie działa na IE11.
Hoang Tran Son
9

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>

Ahmedakhtar11
źródło
8

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 .

Bjorn
źródło
1
Czy możesz opublikować kolejny link pokazujący, jak to się robi? Nie jest jasne z zamieszczonego linku.
SuperElectric
Wygląda na to, że zaktualizowali swoją stronę i zmienili tę stronę. Myślę, że ta strona posiada zawartość miałem na myśli w moim oryginalnego postu: scribd.com/developers/api?method_name=Javascript+API
Bjorn
Chciałbym móc polubić to więcej niż raz, działa idealnie. Przewiń na dół strony i kliknij API, aby zobaczyć przykłady.
Rocco The Taco,
1
Rejestracja jest teraz zamknięta dla scribd.
Lance Fisher
4
<object width="400" height="400" data="helloworld.pdf"></object>
Daryl H.
źródło
4

PdfToImageServlet przy użyciu ImageMagick'sconvert polecenia .

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

PLA
źródło
4

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>
Despertaweb
źródło
3

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>
George Pligoropoulos
źródło
2

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

GalacticCowboy
źródło
4
@ downvoter starasz się wyjaśnić, dlaczego anonimowo oddajesz głos 10-letniej odpowiedzi?
GalacticCowboy
1
  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.

fartwhif
źródło
0

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.

poniedziałek
źródło
0

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>
Pecata
źródło
-7

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>
Wynn
źródło
Co to ma osiągnąć? Nie widzę, jak to odpowiada na pytanie.
TRiG
Kiedy osadzam plik PDF w swoim HTML, znajduję najlepszy sposób, aby mieć link do tego dokumentu. takich jak <a href=" server1.network/trifold_JonesChiro.pdf "target='__blank'> Portal klienta Trifold (próbka) </a> czasami jest to czysta odpowiedź, aby otworzyć stronę i pokazać plik pdf vs tring, aby go umieścić w html. Pozwala również na pozostawienie pliku pdf otwartego na karcie.
Wynn
Więc twoja rekomendacja to link, a nie osadzanie? W porządku, ale odpowiedź jest dość niejasna.
TRiG