2013-04-06 24 views
10

Aus irgendeinem Grund behandelt der iPad Safari Browser eingebettete PDFs nicht gut. PDF-Dateien werden einzeln angezeigt, wenn sie eigenständig gestartet werden, jedoch nicht mit dem Objekt-Tag. Das Problem ist, dass sie nicht scrollen.Machen Sie eingebettete PDF scrollbar in iPad

Ich habe eine Jquery-Seite mit einem eingebetteten PDF, das schön auf Mozilla und Chrome scrollt, aber auf Safari (iPad) bleibt das PDF auf der ersten Seite stecken und kann nicht gescrollt werden. Die Frage ist, wie kann ich das auf dem iPad Browser machen?

Eine ähnliche Frage wurde hier Making embedded PDF scrollable in iPad geschrieben, aber die Antwort ist nicht sehr gut. Sie sind Betrug durch eine Höhe von 10000px verwenden, die eine Menge von Leerzeichen für einen kleinen doc erstellt und wird möglicherweise nicht für eine sehr große doc arbeiten:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>PDF frame scrolling test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <style> 
     #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; } 
     object { width: 500px; height: 10000px } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <object id="obj" data="my.pdf" >object can't be rendered</object> 
    </div> 
    </body> 
</html> 

Jede Art und Weise dies ohne hartzucodieren ein zu erledigen verrückte Höhe?

+0

Ist die PDF in der App eingebettet oder wird es von einem Server gesehen? Gibt es einen Grund, warum Sie das PDF in einem UIWebView oder Mobile Safari präsentieren müssen? – epatel

+0

Das PDF ist auf dem Server. Letztendlich werden die PDFs dynamisch auf dem Server aktualisiert und die App zeigt sie unabhängig von ihrer Form oder Größe an. Der Rest der App ist in jQuery erledigt, und das iPad ist unsere Vorliebe. Im Moment starte ich die PDFs in ein neues Browserfenster, weil es funktioniert, aber im Idealfall möchte ich sie in die Seite einbetten, damit sie nicht gehen müssen. – chrisnova10

+0

Es gibt keine native App? – epatel

Antwort

15

Ich habe seit Jahren versucht, eine Lösung für dieses Problem zu finden. Ich werde versuchen, jeden zu retten, der es irgendwann sucht: ES GIBT KEINE LÖSUNG FÜR DIESES PROBLEM. Die Art und Weise, wie Safari das PDF-Rendering behandelt, steht hoffnungslos im Konflikt mit dem gesamten Konzept der Einbettung eines PDFs in eine Webseite. Darüber hinaus sind alle Browser auf einem iPad erforderlich, um die Safari-Rendering-Engine zu verwenden, sodass Sie Benutzer nicht einmal anweisen können, einen anderen Browser zu installieren.

Die einzige Möglichkeit, ein PDF mit anständigen Ergebnissen einzubetten, ist die Verwendung eines Drittanbieter-Rendering-Dienstprogramms. Es gibt einige jQuery-Lösungen, aber für meine Zwecke fand ich die einfachste Möglichkeit, einen Google Doc Viewer-Link in ein Objekt oder Iframe-Tag einzubetten. Dies ist relativ einfach zu tun, und Sie können einfach die Anweisungen finden Sie hier:

https://docs.google.com/a/dloweb.com/viewer

Diese Lösung gute Display-Wiedergabe und einfache Paginierung und Zoom-Steuerelemente enthält. Stellen Sie sicher, dass Sie die Option & embedded = true einschließen, wenn Sie sie in ein iframe- oder Objekt-Tag einbetten, sonst funktioniert sie nicht. Der Betrachter benötigt eine öffentlich zugängliche URL für Ihr Dokument. Wenn Sie Sicherheitsbedenken haben, wie ich, müssen Sie einen Webdienst schreiben, der das Dokument mit einem Token für den einmaligen Gebrauch bereitstellt.

Es gibt eine gute Webseite ist, die mehr andere Optionen auflistet sollten Sie für etwas ein wenig robust suchen: benötigen

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

+0

Der jqueryrain-Link wurde auf eine scammy-looking "Sie haben ein freies iPhone" Seite für mich umgeleitet. Ich frage mich, ob der Inhalt der Seite woanders verfügbar ist? –

+0

Ich sehe das. Ich denke, ich sollte ein Ablaufdatum auf meinem Post haben. (Warnung: Links werden nicht garantiert, um vier Jahre nach der Veröffentlichung in Betrieb zu sein ...) oder so ähnlich. 8^P – MSD

+1

Ich denke, deshalb kommen die Leute immer wieder zu dem Schluss, dass wir nicht nur Links posten, sondern deren Inhalt zusammenfassen sollten. –

0

Du hast nicht die Höhe des Objekts zu etwas verrückt, setzen Setzen Sie es einfach auf die gleiche Höhe wie Ihr Containerelement. Um mit dem hoffnungslosen Safari-Rendering-Objekt zu scrollen, müssen Sie zwei Finger (beide oben/unten und links/rechts) verwenden.

Ich habe auch diese Eigenschaften in meinem Container-Elemente ein:

overflow: scroll; 
-webkit-box-pack: center; 
-webkit-box-align: center; 
display: -webkit-box; 

Etwas, das ich nicht füllen die gesamte Breite auf den Behälter zu bekommen war erreichen könnte, aber zumindest können Sie durch das Dokument navigieren.

2

Die Antwort des MSD ist ziemlich genau. Ich habe versucht, es auf viele verschiedene Arten zu tun, von einigen der vorgeschlagenen Libs zur Verwendung von Objekt, Embed Element usw.

In jedem Fall scrollt es nicht für mich (iPad Air 2 und Air 1 mindestens auf iOS 8). Oder es scrollt mit übermäßig gestrecktem Brief oder funktioniert nur auf kurzen 1-2 Seiten Dokumenten.

Die Lösung die ich am effizientesten gefunden habe, bietet eine Verbindung zu iPad-Benutzer über Benutzer-Agent, um direkt auf die Datei zuzugreifen, sie können es in der Registerkarte sehen und durchblättern. Es ist nicht eingebettet, aber es ist die effizienteste und funktionierende Lösung, die ich für meine aktuellen Bedürfnisse finden konnte.

Ich hoffe, dass es jemand Eintauchen in die gleiche Sache

+0

Das ist keine * Lösung *, aber ein Workaround – Akash

8

Pdf.js hilft die richtige Wahl sein kann. Es funktioniert perfekt für uns.

Sie einfach herunterladen von https://mozilla.github.io/pdf.js/ und legen Sie es in Ihre Website.

Dann kann es in einem Iframe enthalten sein

<iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe> 

Eine Demo finden Sie hier: https://mozilla.github.io/pdf.js/web/viewer.html

Grüße

+0

Wir verwendeten diese Methode, es funktionierte gut und war einfach zu implementieren. – cjohansson