2013-08-21 15 views
12

Aby wyjaśnić, narzędzie ręczne jest funkcją dla użytkownika, kliknij pdf i przeciągnij, który jest używany do zastąpienia nawigacji paska przewijania.Jak dodać narzędzie ręczne (chwyć stronę i przeciągnij) w przeglądarce Chrome i przeglądarce Firefox PDF?

Problem polega na tym, że przeglądarka przeglądarki Chrome i Firefox domyślnie nie ma tej funkcji i chciałbym umożliwić użytkownikowi przeciągnięcie strony.

Obejście polega na użyciu biblioteki JavaScript (w moim przypadku do pobrania https://github.com/Rob--W/grab-to-pan.js) za pomocą obiektu do osadzania (przeglądarki plików PDF). Kiedy maksymalnie rozmiar pliku pdf i użytkownika przeciągnij osadzony obiekt.

Problem mam spotkanie jest

  1. Podczas korzystania Chrome/Firefox, treść PDF nie pasują do strony ale auto rozmiaru domyślnie nawet mam ustawić Adobe PDF otwarty parametru, przy użyciu iframe.

  2. Kod JavaScript wydaje się być niezgodny z przeglądarką plików PDF Firefox, działa płynnie w przeglądarce Chrome, ale nie w Firefoksie.

Oto kod źródłowy, możesz pobrać bibliotekę z powyższego linku i obejrzeć. Nie zapomnij umieścić "1.pdf" razem z plikiem źródłowym.

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<title>Grab-to-pan.js demo</title> 
<link rel="stylesheet" href="grab-to-pan.css" type="text/css"> 
<style> 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.scrollable { 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
    background-color: #EEE; 
} 
#zoomPage { 
    overflow:visible; 
    width: 100%; 
    height: 150%; 
} 
</style> 
</head> 
<body> 
<label><input type="checkbox" id="activate-g2p" checked> Activate Grab to Pan</label> 
<div class="scrollable" id="scrollable-container"> 
<object id = 'zoomPage' type='application/pdf' data= '1.pdf#zoom=page-fit'><p>The PDF can not display</p></object> 
</div> 
<script src="grab-to-pan.js"></script> 
<script> 
document.getElementById('activate-g2p').onchange = function() { 
    if (this.checked) g2p.activate(); 
    else g2p.deactivate(); 
}; 

var scrollableContainer = document.getElementById('scrollable-container'); 
var g2p = new GrabToPan({ 
    element: scrollableContainer 
}); 
g2p.activate(); 

</script> 
</body> 
</html> 
+0

Zapraszamy do użycia innej wtyczki jquery dragging, która zastąpi oryginalną. – user782104

+0

możesz utworzyć skrzypce dla bieżącego modelu roboczego .. – MarmiK

+0

chcesz powiedzieć, że chcesz przenieść obiekt zawierający plik PDF lub stronę PDF? – MarmiK

Odpowiedz

5

Nie sądzę, że można. Plik pdf jest ładowany jako obiekt osadzony.
Zakładając, że tworzysz aplikację internetową, możesz użyć pliku pdf.js do załadowania/wyświetlenia dokumentów PDF za pomocą własnego skryptu JavaScript lub przy użyciu własnej przeglądarki. W ten sposób nie będziesz musiał się martwić o to, że przeglądarka załaduje dokumenty PDF, i możesz manipulować przeglądarką zgodnie z Twoimi wymaganiami.

Mam nadzieję, że to pomoże.

+0

Dzięki. Ale jak ustawić plik pdf .js jako domyślną przeglądarkę dla wszystkich przeglądarek przeglądarek? Do tej pory staram się używać PDF.js na chrome działa tylko wtedy, gdy zainstalowana jest wtyczka rozszerzenia i kliknij na link pdf. Dzięki – user782104

+0

Jak już powiedziałem, nie możesz. PDF.js to nie aplikacja, dostępna jako rozszerzenie/plugin dla firefox i chrome. Plus jako biblioteka dla programistów. –

2

Jeśli chcesz zezwolić użytkownikowi na używanie dowolnej przeglądarki plików PDF, którą skonfigurował, nie możesz dodawać funkcji do tej przeglądarki. Jeśli chcesz kontrolować działanie przeglądarki, musisz ją podać samodzielnie. Jest to bardzo jedna z tych sytuacji. Próba zmieszania tych dwóch nie przyniesie dobrych rezultatów. Google i Mozilla mogą swobodnie zmieniać swoje przeglądarki plików PDF, nie myśląc o tym w witrynie.

Jak wspomniano powyżej, można osadzić plik PDF.js w swojej witrynie internetowej zgodnie z instrukcjami pod numerem https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website. Nie wiem, czy obsługa tego pliku PDF jest wystarczająca dla twojego scenariusza, ale możesz go przetestować. Ponieważ kod PDF.js jest hostowany w Twojej witrynie, a zatem pod Twoją kontrolą, możesz edytować go według własnego uznania.

Powiązane problemy