Wyświetl PDF w przeglądarce internetowej


86

Jak wyświetlić plik PDF w przeglądarce internetowej na stronie .html?

Odpowiedzi:


121

Używam przeglądarki PDF z możliwością osadzania w Dokumentach Google. Dokumenty nie muszą być przesyłane do Dokumentów Google, ale muszą być dostępne online.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

3
Dzięki temu rozwiązaniu niektórzy użytkownicy nie widzą pliku PDF, ale są proszeni przez Google o zalogowanie się w pierwszej kolejności.
Philipp Zedler

41
Mam pytanie odnośnie tego rozwiązania. Czy Google będzie przechowywać kopię mojego pliku PDF na swoich serwerach? Czy zachowa prywatność moich treści?
hd.

@Alex, aby wiedzieć na pewno, spróbuj ... spróbuję -: //docs.google.com/gview? Url =: //path.com/to/your/pdf.pdf&embedded=true jako iframe src
bradenkeith

czym różni się / jest lepszy od rozwiązania @ Will polegającego na bezpośrednim ustawianiu źródła iFrame na plik PDF? Rozumiem, że bezpośrednie linkowanie będzie zależeć od strony klienta oprogramowania, aby faktycznie wyświetlić plik PDF, ale czy dokumenty Google nie zrobiłyby tak dobrze?
Félix Gagnon-Grenier

3
@hd. Tak, Google po prostu wyświetla plik PDF za pomocą wbudowanego wyświetlacza. Nie sądzę, aby zachowali kopię, chociaż będą musieli przetłumaczyć ją na wyświetlanie strona po stronie, więc spodziewam się, że w pewnym momencie będą konwertować do formatu PNG na zasadzie strona po stronie. Każdy, kto korzysta z tej odpowiedzi, powinien pamiętać, że Google ma limit przepustowości dla dokumentów innych niż Dokumenty Google. Po wyczerpaniu plik PDF nie jest wyświetlany, a jedynie komunikat o przekroczeniu przepustowości i spróbuj ponownie później.
Jon

37

zamiast używać iframe i, w zależności od strony trzeciej, pomyśl o użyciu flexpaper lub pdf.js.

Użyłem PDF.js , działa dobrze dla mnie. Oto demo .


3
Jak to nie jest osoba trzecia?
Alex

41
Jest to kod strony trzeciej, a nie usługa innej firmy.
Collin Anderson,

Lepsze rozwiązanie dla aplikacji dla środowiska VPN.
Erlan,

19

preferowane użycie znacznika obiektu

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

pamiętaj, że możesz zmienić szerokość i wysokość na dowolną wartość, którą odwiedzisz http://www.w3schools.com/tags/tag_object.asp


To, co opublikowałeś, nie zapewnia więcej wglądu w odpowiedź.
Daniël W. Crompton,

2
pytanie brzmiało: Jak wyświetlić plik PDF w przeglądarce internetowej na stronie .html? użycie znacznika obiektu html 5 pomoże ... <object width = "400" height = "400" data = "helloworld.swf"> </object> Użyj tego elementu do osadzenia multimediów (takich jak audio, wideo, aplety Java, ActiveX, PDF i Flash) na stronach internetowych.
BAKARI SHEGHEMBE

Masz całkowitą rację, jednak link do w3schools nie zawiera żadnych dodatkowych informacji, które uzupełniałyby Twoją odpowiedź.
Daniël W. Crompton,

To nie zadziała, jeśli nie masz przeglądarki
plików

1
Tak, to prawda. Zaletą znacznika obiektu jest to, że może to wykryć. Pozwala też na umieszczenie dodatkowych opcji dla odwiedzających, aby przeglądali stronę za pomocą gdrive, onedrive itp. <Object data = ' example.com/path.pdf#toolbar=1'type='application/pdf ' width = ' 100% 'height =' 700px '> <p> Wygląda na to, że Twoja przeglądarka internetowa nie jest skonfigurowana do wyświetlania plików PDF. Bez obaw, po prostu <a href=' example.com/path.pdf'> kliknij tutaj, aby pobrać plik PDF. </a> lub <a href = " drive.google.com/[drive path] / view? Usp = sharing "> kliknij tutaj, aby wyświetlić </a> </p> </object>
BAKARI SHEGHEMBE

19

Najprostszym sposobem jest utworzenie ramki iframe i ustawienie źródła na adres URL pliku PDF.

(kaczki szalonych projektantów HTML) Zrobiłem to sam, działa dobrze, między przeglądarkami (indeksuje do bunkra).


8
nie działa, jeśli nie masz zainstalowanej wtyczki pdf na IE
Collin Anderson,

3
Jak to jest oczywiste? Wydaje się, że jest to przydatny dodatek do „cross-browser”.
showdev

1
było to o wiele łatwiejsze do skonfigurowania niż wszystkie inne rozwiązania innych firm. Nie wiem, jak sprawował się w 2011 roku, ale w 2016 jest bardzo szybki i pełen przydatnych funkcji. Wydaje się również, że działa świetnie w Chrome, FF i IE
slaw

1
Nie działa dla mnie w Chrome na telefonie z Androidem: pobiera plik PDF i otwiera go w osobnej aplikacji (jeśli taką masz). I nie mogę przewijać do innych stron w Safari na iOS. Właśnie widzę pierwszą stronę pdf.
Vasiliy Zverev

7

Wtyczka przeglądarki kontroluje te ustawienia, więc nie możesz tego wymusić. Możesz jednak zrobić prostą <a href="whatver.pdf">zamiast <a href="whatever.pdf" target="_blank">.


Wreszcie ktoś, kto wie, o czym mówią, aby uzyskać tę odpowiedź. To najlepsza i najprostsza odpowiedź. @jschorr jest absolutnie poprawne. Przeglądarka kontroluje te ustawienia. Najbardziej wydajny!!
Val

4

Dopóki hostujesz plik PDF, właściwy jest atrybut docelowy. Innymi słowy, w przypadku plików względnych użycie atrybutu docelowego z wartością _blank będzie działać dobrze.

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

W przypadku ścieżek absolutnych silniki będą kierować się do U nified R esource L ocator i otwierać je. Więc pomiń atrybut docelowy.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

W obu przypadkach przeglądarki wykonają dobrą robotę.


To rozwiązanie zadziałało dla mnie znacznie lepiej niż zaakceptowana odpowiedź. Należy również zauważyć, że pracuję z pewnymi poufnymi informacjami, więc brak publicznego dostępu do moich dokumentów był dla mnie ważny.
Casper Wilkes


3

Możesz użyć tego kodu:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

Lub użyj przeglądarki PDF z możliwością osadzania w Dokumentach Google:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

1

Możesz również skorzystać z tej prostej metody GoogleDoc.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

Spowoduje to utworzenie nowej strony, na której możesz przeglądać dokument bez zakłócania przepływu.


To działa dobrze, dzięki. Ale co w przypadku, gdy użytkownik chce zobaczyć plik PDF bez połączenia z Internetem?
Użytkownik

możesz użyć biblioteki JQuery, takiej jak pdf.js github.com/mozilla/pdf.js .. 2. Sprawdź PDFObject, który jest biblioteką JavaScript do osadzania plików PDF w plikach HTML. Całkiem dobrze radzi sobie ze zgodnością z przeglądarkami i najprawdopodobniej będzie działać na IE8.
Asuquo12

0

Prostym rozwiązaniem jest umieszczenie go w ramce iframe i nadzieja, że ​​użytkownik ma wtyczkę, która go obsługuje.

(Nie rozumiem, wtyczka Acrobat była tak wyczerpującym źródłem zasobów i źródłem niestabilności, że staram się usunąć ją z każdej przeglądarki, której dotyka).

Skomplikowanym, ale stosunkowo popularnym rozwiązaniem jest wyświetlenie go w aplecie flashowym.


0

Renderujemy strony plików PDF jako pliki PNG na serwerze za pomocą JPedal (biblioteka java). To w połączeniu z javascriptem daje nam dużą kontrolę nad wizualizacją i nawigacją.


Myślę, że to świetnie, ale wymaga wielu zasobów.
eveevans

Ale użytkownicy nie mogą kopiować / wklejać tekstu z PNG.
Vasiliy Zverev

0

Niedawno musiałem dostarczyć bardziej przyjazną dla urządzeń mobilnych, responsywną wersję dokumentu .pdf, ponieważ wąskie ekrany telefonów wymagały przewijania w prawo iw lewo. Aby umożliwić tylko przewijanie w pionie i uniknąć przewijania w poziomie, zadziałały następujące kroki:

  • Otwórz plik .pdf w przeglądarce Chrome
  • Kliknij Otwórz w Dokumentach Google
  • Kliknij opcję Plik> Pobierz> Strona internetowa
  • Kliknij pobrany dokument, aby go rozpakować
  • Kliknij rozpakowany dokument HTML, aby otworzyć go w przeglądarce Chrome
  • Naciśnij klawisz Fn F12, aby otworzyć narzędzia Chrome Dev Tools
  • Wklej kopię (document.documentElement.outerHTML.replace (/ padding: 72pt 72pt 72pt 72pt; /, '') .replace (/ margin-right:. *? Pt / g, '')) do konsoli i naciśnij Enter aby skopiować poprawiony dokument do schowka
  • Otwórz edytor tekstu (np. Notatnik) lub w moim przypadku VSCode, wklej i zapisz z rozszerzeniem .html.

Wynik wyglądał dobrze i nadawał się do użytku zarówno w środowiskach stacjonarnych, jak i mobilnych.



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.