PDF-Datei auf Webseite als Karussell mit jeder Seite als separate Folie anzeigen

Question

Ich bin vor einer schwierigen Aufgabe - erstellen Sie ein Slider-Karussell Winde wird separate Seiten eines einzigen mehrseitigen PDF als separate Folien auf Webseite angezeigt werden. Schauen Sie sich das Bild unten die genaue Vorstellung davon zu bekommen, wie es soll aussehen, wenn ihre getan:

Es ist wie ein normales Dokument aussehen muss und sollte keine Bildlaufleisten, Symbolleisten haben, Zoom-Tasten und bald. Außerdem wird die Website auf einem lokalen Host ohne Internet gehostet, so dass externe APIs wie Google PDF Viewer nicht in Frage kommen.

Im Moment sehe ich 2 verschiedene Ansätze: PDF in jede Folie einbetten oder serverseitige Umwandlung von PDF in PNG, um später in Folien anzuzeigen. Ich bin vor zur Zeit einige Hindernisse in diesen beiden Ansätzen:

1) Erster Ansatz - einbetten PDF

Was passiert, wenn ich pdf in jeder Folie einbetten den page Parameter angeben?

Ich habe versucht:

a) Plain einbetten

b) Objekt

I nächsten Parameter #page=5&toolbar=0&navpanes=0&scrollbar=0&view=fit mit pdf verwendet habe.

Die Ergebnisse sind so ziemlich das gleiche:

• Chrome tut die pdf und zeigt Bildlaufleisten sowie einige PDF-Viewer Hintergrund sowie einige Zoom-Tasten der Maus darüber
• Firefox maßstabs zeigt Symbolleisten
• Ie und Safari beide ziemlich nah an dem, was ich brauche, noch einige dunklen Hintergrund von PDF-Viewer

zeigt

Ist es möglich, dass es keine Cross-Browser-Möglichkeit zum Einbetten von Roh-PDF gibt, damit es nahtlos wie ein Teil der Seite aussieht?

2) Zweiter Ansatz: Covert PDF in ein anderes Format (habe nicht versucht, diese noch)

Was passiert, wenn ich PDF auf Server-Seite konvertieren?

a) Mit ImageMagick in PNG konvertieren. Nachteil: Der Client muss ImageMagic und wahrscheinlich Ghostview auf einem Server installieren, den ich möglichst vermeiden möchte.

b) In SWF mit PHP SwfTools konvertieren. Nicht sicher, ob dies wie erwartet umgesetzt wird und die Flash-Unterstützung rückläufig ist, wahrscheinlich nicht die beste Lösung.

Also welchen Weg soll ich gehen? Ich würde es vorziehen, es so einfach wie möglich zu halten ... Hat jemand ähnliches Problem festgestellt und kann mir einen Rat geben?

Bitte helfen!

Answer 1

Sie haben tatsächlich eine dritte Option - Pdf.js - https://mozilla.github.io/pdf.js/

Die einfachste Server-Seite Umwandlung zu PNG sein wird. Es würde keine Komplexität mit der Einbettung in ein Karussell geben und die Kompatibilität wäre am höchsten. Am vielseitigsten wäre wahrscheinlich PDF.js. Wenn Sie Flash verwenden, bleiben mobile Browser aus.

Answer 2

Sie können Ihre PDF-Datei mit Pdf.js

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> 
<script type="text/javascript"> 
function renderPDF(url, canvasContainer, options) { 
    var options = options || { scale: 1 }; 

    function renderPage(page) { 
     var viewport = page.getViewport(options.scale); 
     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext('2d'); 
     var renderContext = { 
      canvasContext: ctx, 
      viewport: viewport 
     }; 

     canvas.height = viewport.height; 
     canvas.width = viewport.width; 
     canvasContainer.appendChild(canvas); 

     page.render(renderContext); 
    } 

    function renderPages(pdfDoc) { 
     for(var num = 1; num <= pdfDoc.numPages; num++) 
      pdfDoc.getPage(num).then(renderPage); 
    } 
    PDFJS.disableWorker = true; 
    PDFJS.getDocument(url).then(renderPages); 
} 
</script> 

<div id="holder"></div> 

<script type="text/javascript"> 
renderPDF('sample.pdf', document.getElementById('holder')); 
</script>