Wie man die Höhe des PDF-Dokument laden Sie in einem iframe

Gibt es eine Möglichkeit, um die tatsächliche Höhe der PDF-Inhalt im iframe geladen?

Stehe ich vor ein Problem zu scrollen, PDF-Inhalte in der iPAD-Gerät? Ich kann die Höhe des Körpers Inhalte scrollen erfolgreich, aber nur für HTML-Seiten.

this.contentWindow.document.body.scrollHeight

aber für die PDF-seinen-nicht wieder exakt die Höhe des PDF-Dokuments? Gibt es eine Möglichkeit zu bekommen, für das?

Dank

Peter

die exakte Höhe des PDF-Dokument einzelne PDF-Seiten können verschiedene Dimensionen haben. Es ist nichts, wie ein die Höhe des Dokuments.

InformationsquelleAutor peterkr | 2013-02-21

Getestet habe ich diese auf meinem iPad und es funktioniert, vielleicht könnte es gut sein, auch für Sie.
Es ist eine HTML5-js-Projekt von mozilla rendert pdf-Datei und zeigt Sie an und Sie können den viewport einer Seite in der pdf-Datei.
https://mozillalabs.com/en-US/pdfjs/
https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  //Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    //Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    //Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

Es funktioniert! Danke. Aber ein problem ist hier, dass diese Lösung nicht 100% cross-browser ( alten IE ich freue mich auf Sie ). Es ist also auch nötig, um das browser-Erkennung. Aber es ist problem für das iPad.

InformationsquelleAutor noamtcohen

2

Die Antwort ist keine (leider).

Weil auf der element-Ebene, PDF object/embeds nicht, auto wachsen, um mehr Höhe, wenn das Dokument gezeigt, die es braucht, damit Ihre wahre Höhe ist nie ausgesetzt, der DOM.

Selbst wenn Sie rufen Sie eine PDF-Datei direkt an, indem Sie es als Quelle eines iframe du wirst sehen, dass der iframe hat eine DOM-layout wie jede andere Seite, die mit einem object oder embed des pdf-Dokuments in der body sowieso.

In diesem PDF 'element' ist, die entsprechenden PDF-plugin, das Territorium, und nicht eingesehen werden kann javascript. Es kann einige flash, java oder browser-plugin, das Ihnen erlaubt, mit Ihr zu interagieren, aber ich habe noch nicht davon gehört.
- Eigentlich gibt es eine Lösung (, arbeitet in der Regel ) durch @noam. Es braucht eine kleine änderung, aber im Allgemeinen ist es gut.
- das ist genial, ich bin einer der Menschen, die favourited die Frage, da brauchte ich eine Lösung. Nach niemals finden, und eine Begründung, warum ich dieses hier. Ich denke, dass die JS-Bibliothek rendert das PDF selbst ist so, wie es weiß. Aber im Einklang mit der Frage über eine iframe es nicht beantworten.
- Gut Aussehen. Wir verwenden pdf-js zu bekommen pageCount-und pageHeight. Jetzt können wir wissen, Dokument Höhe. Dann setzen wir diesen Wert an iframe.Stil.Höhe und das ist es. Ich weiß, dass dies ist nicht eine Reale Antwort, und Sie beantworten ist eigentlich die "richtige" ein. Aber pdf-js ist ganz gut 'hack'.
InformationsquelleAutor Hashbrown
2

Peter, es gibt keine Weise können Sie Höhe von PDF in iFrame auf iOS safari, da kein adobe reader safari-plugin verfügbar für die mobilen apple-Geräte.
Sie können HTML-5-Canvas zu Rendern von PDF-und open-source client-side-Bibliotheken wie pdfjs...etc...

Ohne, dass der einzige Weg, die Sie bekommen kann Höhe[oder Breite] wird von server verwenden iTextSharp.dll Art der Komponente und die Höhe/Breite der pdf-Seite, die später können Sie vermehren, indem Sie die Anzahl der Seiten, diese kann man einfach auf der server-Seite. Die abgerufene Höhe/Breite Stil Ihr iFrame und geben Sie dann, die PDF-Datei im source-Attribut des iFrame. iFrame wird gestreckt, und Sie erhalten scrolling-Effekt.

ODER

Wenn Sie irgendein Werkzeug oder Komponente, die können konvertieren von PDF zu image, dann haben Sie nur werfen Bilder von server auf HTML, mit javascript, mit dem Sie die Kontrolle haben können auf erste Attribute.
Wir haben die MS-SSRS für unsere Berichterstattung müssen, für einen kleinen Teil der Anwendung, die zugänglich ist, auf dem iPad bekommen wir Bilder von der MS-SSRS statt PDF. Der Grund, warum wir die Annahme dieser option ist, denn wenn die Anzahl der Seiten erhöht sich dann die client-side-framework, wie PDF-JS sterben zu Rendern auf Leinwand.

Haben Sie verschiedene Optionen mit Umgang mit PDF auf dem iPad.
- vielen Dank für deine Antwort, aber pdf-js ist gut enouth, weil wir pdf-js nur um 'Höhe' der pdf-Datei, die alle rendering geschieht durch native iPad-pdf-displayer.
InformationsquelleAutor Hi10
0

Macht die view=fit pdf-viewer-option arbeiten für das, was Sie versuchen zu erreichen (Stellen Sie die automatische Höhe für den iframe):
```
<iframe src="Path/MyPDF.pdf#view=fit"></iframe>
```
Auch diese Lösung Einstellung der Höhe auf auto, bevor Sie versuchen, die Höhe (https://stackoverflow.com/a/11864824/1803682):
```
objIframe = document.getElementById('theIframeId');    
objIframe.style.height = 'auto';

document.body.scrollHeight
```
Endlich - die blog-post hier: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ und iScroll4 kann sich sehen lassen.
- die viewFit flag ist nur, wie sollte das plugin zoom der pdf-Datei, in diesem Fall, wir erzählen es passen die Seiten zu der Ansicht, die Breite oder die Höhe. Auch in dem link die akzeptierte Antwort zeigt ein iframe hat Scrollbalken! Wie ist das akzeptiert? Css Höhe von auto wird nicht funktionieren, weil das plugin nicht zu kommunizieren, wie groß der Inhalt wird an den browser (so dass es dann "auto", um die Standard jedenfalls). Wenn es Ihnen gelingt, es zu erhalten arbeitend Bearbeiten diese Geige. Im Grunde, nur sollte das Fenster scrollen (nicht die pdf), wenn Sie möchten, extrahieren Sie die Höhe dieses Weise
- Scheint dumm zu denken, dass die einzige Lösung ist, so etwas wie iScroll4 gegeben, wie allgegenwärtig der pdf-Dateien.
InformationsquelleAutor Matthew
-2

Dieses Problem kann gelöst werden durch die Verwendung der JQuery.

Lässt uns annehmen, dass Sie den iframe wie folgt mit einer id
```
<iframe src="name.pdf" id="pdf_frame"></iframe>
```
nun durch die Verwendung der JQuery können wir die Höhe des iframe-als auto, als Sie benötigen zum anzeigen der pdf-Dokument in den iframe.
```
$('#pdf_frame').css('height','auto');
```
Können Sie die Höhe wie
```
document.body.scrollHeight
```
- Ich weiß nicht, wie das funktionierte für Sie und die Jungs, die von Ihnen positiv bewertet werden Sie.. nicht für mich arbeiten, und ich kann nicht sehen, Grund, wie dieser code funktioniert..
InformationsquelleAutor Bala Subramanyam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.