Wyświetl PDF w przeglądarce internetowej

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

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>

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 .

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

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

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

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

Możesz również osadzać za pomocą JavaScript za pomocą rozwiązania innej firmy, takiego jak PDFObject .

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>

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.

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.

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

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.

Wyświetlanie treści zapisanych w formacie PDF / DOC / DOCX jest idealne do wyświetlania pliku pdf / doc / docx na Twojej stronie internetowej

Czy próbowałeś użyć prostego tagu img?

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">