Wie Sie einen hand-Werkzeug (Greifer der Seite und ziehen) - Funktion in Chrome-und Firefox-PDF-viewer?
Zu klären, hand-Werkzeug ist eine Funktion für Benutzer auf die pdf klicken und ziehen um , das verwendet wird, ersetzen Sie die Bildlaufleiste navigieren .
Das problem ist, dass standardmäßig der Chrome-und Firefox-pdf-viewer nicht über diese Funktion, und ich möchte dem Benutzer zu ermöglichen, ziehen Sie die Seite.
Eine Problemumgehung ist die Verwendung einer JavaScript-Bibliothek (Grab von Pan https://github.com/Rob--W/grab-to-pan.js in meinem Fall) mit einem embed-Objekt (PDF-viewer). Wenn ich die maximale Größe des pdf-Dokuments und Benutzer ziehen Sie das Objekt einbetten.
Habe ich das problem Begegnung ist
-
Wenn die Verwendung von Chrome /Firefox, der PDF-Inhalte passen nicht auf die Seite, aber die auto-resize-standardmäßig, auch ich habe den Adobe PDF open Parameters, der Verwendung von iframe.
-
Den JavaScript-code scheint Konflikt mit der Firefox-PDF-viewer, es funktioniert reibungslos in Google Chrome aber nicht in firefox.
Hier ist der source-code, Sie können sich laden Sie die Bibliothek aus dem link oben erwähnt und haben einen Blick. Vergessen Sie nicht, setzen ein '1.pdf' zusammen mit der Quell-Datei.
<!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>- Es ist zu begrüßen, andere verwenden jquery ziehen plugin, das original zu ersetzen.
- können Sie erstellen ein Turnschuh für das aktuelle Modell..
- Sie sagen, dass Sie das Objekt verschieben möchten, die enthält eine PDF oder eine Seite der PDF-Datei?
- Bitte erstellen fiddle für Ihr Skript für demo-Zwecke auf jsfiddle.net
- Nitpick: grab-to-pan.js ist nicht ein jQuery-plugin, aber geschrieben in reinem JavaScript. Ich werde es zu PDF.js an einem gewissen Punkt (siehe github.com/mozilla/pdf.js/issues/2957).
- Das hand-Werkzeug umgesetzt PDF.js über github.com/mozilla/pdf.js/pull/3684. Sie können versuchen, sich die Vorschau an 107.22.172.223:8877/a6730b3e61bb3cf/web/viewer.html. Tipp: Verwenden Sie die "h" Taste schalten Sie die "hand-Werkzeug".
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube nicht, dass Sie können. Die pdf-Datei geladen wird als eingebettetes Objekt ein.
Vorausgesetzt, dass Sie die Entwicklung einer web-Anwendung, die Sie verwenden können pdf.js das laden/anzeigen von pdf-Dokumenten, die entweder mit Ihrer eigenen JavaScript-oder mit seinen eigenen viewer. Auf diese Weise werden Sie nicht haben, um sorgen über die browser-Umsetzung der laden von pdf-Dokumenten, und die Sie anpassen können mit dem viewer als pro Ihre Anforderungen.
Hoffe, das hilft.
Wenn Sie dem Benutzer ermöglichen möchten, zu verwenden, was den PDF-viewer, die Sie konfiguriert haben, können Sie nicht fügen Sie Funktionen, die Betrachter. Wenn Sie möchten, um den Betrieb des Betrachters, müssen Sie es selbst. Das ist sehr viel eine entweder/oder situation. Versuch die Mischung der beiden wird nicht zu guten Ergebnissen führen. Google und Mozilla sind kostenlos ändern Sie Ihre PDF-Viewer ohne jeglichen Gedanken Einfluss auf Ihre Website.
Wie oben erwähnt, kann man einbetten PDF.js in Ihrer web-site gemäß den Anleitungen in https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website. Ich weiß nicht, ob Sie diesen viewer, PDF-Unterstützung ist gut genug für Ihr Szenario, aber man kann sicherlich testen. Da die PDF.js code gehostet wird, auf Ihrer Website und somit unter Ihrer Kontrolle, können Sie es Bearbeiten, wie Sie sehen, passen.