To niesamowite jak wiele informacji mamy dzisiaj przechowywanych w formacie PDF. Według stowarzyszenia PDF, około 2,5 biliona plików PDF jest tworzonych każdego roku, co stanowi 6 procent stron internetowych. Jednakże, jako twórca stron internetowych, pliki PDF na stronie internetowej mogą stanowić różnorodne wyzwanie:
- Doświadczenie przeglądania różni się znacznie w zależności od użytkowników i urządzeń, ponieważ zależy od przeglądarki PDF. Niezależnie od tego, czy jest ona wbudowana w przeglądarki internetowe czy darmowe biblioteki online, niektóre przeglądarki są lepsze od innych. Adobe Acrobat Reader jest ogólnie rzecz biorąc uniwersalnym standardem do poprawnego przeglądania plików PDF.
- Staje się dla mnie trudne włączenie plików PDF do reszty mojej strony. Najczęściej PDFy skłaniałyby użytkowników do pobrania ich na swoje urządzenia.
- Konwersja PDFów do HTML jest trudna i zawodna. Jeśli chcę zaprezentować treść na stronie internetowej, która jest w formacie PDF, często mogę spłaszczyć PDF, aby ułatwić jego osadzenie.
- Nie mam wglądu w to, w jaki sposób odwiedzający przegląda te pliki PDF. Oznacza to, że nie mam pojęcia, czy ktoś czyta określone strony, jak długo spędzają na tych stronach, itp.
Na szczęście, Adobe wydało Adobe PDF Embed API (PDF Embed), łatwy sposób na włączenie PDF bezpośrednio na swojej stronie internetowej z łatwym snippet kodu. Jest całkowicie darmowy w użyciu i renderuje się po stronie klienta w twojej aplikacji internetowej. Nie musisz uczyć się zaawansowanej biblioteki PDF i jest to bardzo łatwe do zrobienia. Żadne dane nie są renderowane na serwerach Adobe. W rzeczywistości, możesz nawet nauczyć się jak się tym bawić tutaj.
NIC! To jest właśnie najwspanialsza rzecz w tym wszystkim. Nie potrzebujesz niczego poza stroną internetową, aby używać PDF Embed.
Użycie strony demonstracyjnej do wypróbowania API PDF Embed
Najprostszym sposobem na zapoznanie się z PDF Embed jest wypróbowanie go na stronie demonstracyjnej. Jest to łatwy zasób do rozpoczęcia, ponieważ pozwala na:
- Poznać w czasie rzeczywistym różne tryby osadzania dostępne dla twoich plików PDF.
- Dostosować, które funkcje chcesz jako część przeglądarki, takie jak narzędzia do adnotacji, pobierz PDF, Drukuj PDF, kontrole stron, itp.
- Generuje kod, który możesz wkleić na swoją stronę internetową.
Uzyskanie identyfikatora klienta
Jeśli chcesz wypróbować PDF Embed w swoim własnym kodzie, działa on bez identyfikatora klienta, gdy używasz go lokalnie. Jednakże, jeśli chcesz umieścić go na swojej stronie internetowej, będziesz musiał uzyskać identyfikator klienta. Pobierz swój identyfikator klienta tutaj.
Oto kilka ważnych wskazówek:
- Aby utworzyć identyfikator klienta, musisz mieć Adobe ID. Jeśli go nie posiadasz, możesz zarejestrować się tutaj, używając adresu e-mail, Google, Facebook lub Apple ID.
- Musisz ustawić domenę aplikacji, aby to działało.
Po utworzeniu identyfikatora klienta, będziesz chciał go skopiować i użyć w swoim kodzie.
UWAGA: Chociaż możesz edytować swoje konfiguracje w konsoli Adobe.io, będziesz chciał przejść do linku, aby utworzyć swój klucz. Jeśli utworzysz swój klucz z poziomu Konsoli Adobe.io, nie będzie możliwości ustawienia domeny.
Wybieranie trybu osadzania
Jedną z potężnych rzeczy w PDF Embed jest to, że masz różne tryby osadzania do wyboru:
Pełne okno
Full Window pozwala na przeglądanie plików PDF w trybie podobnym do Adobe Acrobat Reader na komputerze i osadzenie go na swojej stronie internetowej. Uważam, że jest to idealne rozwiązanie podczas przeglądania dokumentów o długiej formie, lub jeśli chcę mieć znane doświadczenie przeglądania PDF w moim UI.
Wielkość kontenera
Wielkie kontenery są świetne dla treści takich jak prezentacje PowerPoint, które zostały przekonwertowane na PDF, lub serie instrukcji. Uważam, że jest to mniej idealne rozwiązanie, jeśli włączasz pliki PDF o długiej formie.
In-Line
Widok In-Line może pomóc projektantom osadzić ich projekty na stronie internetowej bez konieczności przebudowywania ich lub spłaszczania do postaci obrazu. Widok In-Line bierze twój PDF i renderuje go w linii jako HTML. Lubię ten tryb osadzania, gdy chcesz wyświetlać treści takie jak infografiki, które zaprojektowałeś w Illustratorze, InDesign, itp. i wyeksportowałeś do PDF, ale chcesz, aby nadal można było je przeszukiwać i mieć hiperłącza bez konieczności martwienia się o ponowne projektowanie dla stron internetowych.
Lightbox
Lightbox otwiera przeglądarkę PDF na górze strony internetowej, aby zapewnić bardziej skoncentrowany widok. Ten tryb jest idealny, gdy masz odnośniki do plików PDF na całej swojej stronie, ale chcesz kontrolować przeglądanie, zbierać dane analityczne i uruchamiać zdarzenia w oparciu o sposób interakcji odbiorców z plikami PDF, które zamieściłeś.
Generowanie kodu
Gdy używasz Demo Site i klikniesz na Generuj kod, będzie on wyglądał tak jak poniżej:
Aby zacząć, będziesz chciał zastąpić następujące elementy:
- Replace <YOUR_CLIENT_ID> z identyfikatorem klienta, który wygenerowałeś.
- Zastąp parametr url adresem URL pliku PDF, który chcesz wyświetlić.
UWAGA: Ponieważ PDF Embed renderuje po stronie klienta w przeglądarce, będzie honorował wszelkie ograniczenia Cross-Domain, więc może być konieczne upewnienie się, że nagłówki pozwalają na łączenie cross-domain. - Zmień fileName na nazwę swojego dokumentu. Pojawi się to w przeglądarce.
Jak już to zrobisz, będziesz mógł osadzić swój PDF na swojej stronie. To takie proste!
Przykłady, które używają Services SDK już dziś
Istnieje wiele aplikacji, które już dziś używają Services SDK:
- PDF Viewer Component for AEM
- PDF like a boss
- Microsoft SharePoint Plugin
- Adobe Acrobat for G Suite
Podsumowanie
PDF Embed naprawdę pozwala na dużą elastyczność w wykorzystaniu plików PDF na twoich stronach. Jest wiele więcej rzeczy, które możesz zrobić z tym narzędziem, od Analytics, przez Event Listeners, i więcej, o których możesz dowiedzieć się więcej z tej dokumentacji.
Chcemy usłyszeć od Ciebie
Gdy już spojrzysz na PDF Embed, chcielibyśmy usłyszeć Twoje opinie! Zaangażuj się w Forum Adobe Document Cloud, aby przekazać swoje opinie, lub odpowiedz na ten artykuł!
UPDATE (07/07/2020): Aktualizacja w celu dodania nowego trybu osadzania Lightbox oraz nowego obrazu nagłówka.
UPDATE (07/31/2020): Zaktualizowany, aby odzwierciedlić nowy branding.