Machen Sie eingebettete PDFs auf dem iPad scrollbar

Question 1

Aus irgendeinem Grund kann der iPad-Safari-Browser eingebettete PDFs nicht gut verarbeiten. PDFs werden einzeln gut angezeigt, wenn sie eigenständig gestartet werden, jedoch nicht mit dem Objekt-Tag. Das Problem ist, dass sie nicht scrollen.

Ich habe eine JQuery-Seite mit einem eingebetteten PDF, das auf Mozilla und Chrome gut scrollt, aber auf Safari (iPad) bleibt das PDF auf der ersten Seite hängen und kann nicht gescrollt werden. Die Frage ist, wie mache ich das im iPad-Browser?

Eine ähnliche Frage wurde hier gepostet. Eingebettete PDF-Dateien auf dem iPad scrollbar machen, aber die Antwort ist nicht sehr gut. Sie betrügen, indem sie eine Höhe von 10000 Pixel verwenden, was bei einem kleinen Dokument viel Leerraum erzeugt und bei einem sehr großen Dokument möglicherweise nicht funktioniert:

<!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>

Gibt es eine Möglichkeit, dies zu erreichen, ohne eine verrückte Höhe fest zu codieren?

Question 2

Ich habe jahrelang versucht, eine Lösung für dieses Problem zu finden. Ich werde versuchen, jedem, der danach sucht, etwas Zeit zu ersparen: ES GIBT KEINE LÖSUNG FÜR DIESES PROBLEM. Die Art und Weise, wie Safari mit der PDF-Wiedergabe umgeht, steht in hoffnungslosem Widerspruch zum gesamten Konzept der Einbettung einer PDF-Datei in eine Webseite. Darüber hinaus ist es ERFORDERLICH, dass alle Browser auf einem iPad die Safari-Rendering-Engine 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, besteht darin, ein Rendering-Dienstprogramm eines Drittanbieters zu verwenden. Es gibt einige jQuery-Lösungen, aber für meine Zwecke fand ich die einfachste Möglichkeit, dies zu tun, darin, einen Google Doc Viewer-Link in ein Objekt oder einen Iframe-Tag einzubetten. Dies ist relativ einfach durchzuführen und eine einfache Anleitung finden Sie hier:

So zeigen Sie den PDF-Link von Google Drive im Iframe an

Diese Lösung umfasst eine gute Anzeigewiedergabe sowie einfache Paginierungs- und Zoomsteuerungen. Stellen Sie sicher, dass Sie die Option &embedded=true einschließen, wenn Sie es in einen Iframe oder ein Objekt-Tag einbetten, da es sonst nicht funktioniert. Der Viewer benötigt eine öffentlich zugängliche URL zu Ihrem Dokument. Wenn Sie also wie ich Sicherheitsbedenken haben, müssen Sie einen Webdienst schreiben, um das Dokument über ein Einmal-Token bereitzustellen.

Es gibt eine gute Webseite, die mehrere andere Optionen auflistet, falls Sie etwas Robusteres suchen:

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

Question 3

PDF.js kann die richtige Wahl sein. Bei uns funktioniert es perfekt.

Sie laden es einfach von herunter https://mozilla.github.io/pdf.js/ und platzieren Sie es auf Ihrer Website.

Anschließend kann es in einen Iframe eingebunden werden

<iframe src="https://stackoverflow.com/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

Question 4

Hoffentlich kann dies in Zukunft anderen helfen. Ich habe den PDF-Viewer von Google verwendet, um ein PDF in einem Iframe scrollen zu können. Auf dem src-Tag steht also die URL

https://docs.google.com/gview?url=‘ + ‘Link zu PDF einfügen’ + eingebettet=true

Question 5

Die Antwort des MSD ist ziemlich genau. Ich habe versucht, dies auf viele verschiedene Arten zu tun, von einigen der vorgeschlagenen Bibliotheken bis hin zur Verwendung von Objekten, eingebetteten Elementen usw.

Auf jeden Fall scrollt es bei mir nicht (iPad Air 2 und Air 1 zumindest unter iOS 8). Oder es scrollt mit übermäßig gestreckten Buchstaben oder funktioniert nur bei kurzen 1-2-seitigen Dokumenten.

Der Lösung Was meiner Meinung nach am effizientesten ist, ist die Bereitstellung eines Links für iPad-Benutzer über den Benutzeragenten, über den sie direkt auf die Datei zugreifen können. Sie können sie dann auf der Registerkarte sehen und gut darin scrollen. Es lässt sich nicht einbetten, ist aber die effizienteste und funktionierendste Lösung, die ich für meine aktuellen Anforderungen finden konnte.

Ich hoffe, es hilft jemandem, der sich mit der gleichen Sache beschäftigt

Question 6

Sie müssen die Höhe des Objekts nicht auf etwas Verrücktes einstellen, sondern einfach auf die gleiche Höhe wie Ihr Containerelement einstellen. Um mit dem hoffnungslosen Safari-Rendering-Objekt zu scrollen, müssen Sie es verwenden zwei Finger (sowohl nach oben/unten als auch nach links/rechts).

Ich habe auch diese Eigenschaften in meinem Containerelement eingerichtet:

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

Etwas, das ich nicht erreichen konnte, war, dass es die gesamte Breite des Containers ausfüllte, aber Sie können zumindest durch das Dokument navigieren.

Question 7

Eine andere Lösung (ohne Codierung) ist die Verwendung von Google, wenn Sie Einbettungen nur punktuell nutzen möchten.

Speichern Sie Ihr PDF in Ihrem Google Drive
Öffnen Sie es mit Vorschau.

Wählen Sie im Untermenü der drei Punkte „In neuem Fenster öffnen“.
Wählen Sie im neuen Fenster im Untermenü der drei Elemente „Element einbetten“.
Kopieren Sie den Iframe-Code und fügen Sie ihn in Ihre Seite ein.

Hier Dort finden Sie auch eine ausführliche Anleitung und unter Punkt 12 können Sie den Iframe-Code einsehen.

Question 8

static downloadPdfChromeApp(linkSource: string) {
        // Crea un div y dentro un object para luego destruirlo y abrir una nueva ventana enviando la data
        const divpdf = document.createElement('div');
        divpdf.innerHTML = '<div style="display:none;position:absolute">' +
            '<object  style="display:none;" id="docuFrame" type="application/pdf" width="1px" height="1px" data="' +
            linkSource + '"></object></div>';
        document.firstElementChild.appendChild(divpdf);
        const frame = document.getElementById('docuFrame') as HTMLObjectElement;
        window.open(frame.data);
        divpdf.remove();
    }