各ページを別々のスライドとしてWebページにPDFファイルを表示

Question

私は挑戦的な課題に直面しています。スライダーカルーセルウインチを作成すると、単一の複数ページPDFの別々のページが ウェブページ上の別々のスライドとして表示されます。そのが行われたときにそれが見えるようになってどのように正確なアイデアを得るために、以下の画像をチェックアウト：

それは、通常の文書のように見える必要があり、任意のスクロールバー、ツールバー、ズームボタンを持つべきではないとそうです。また、サイトはインターネットのないローカルホスト上でホストされるため、Google PDF Viewerなどの外部APIを使用することは選択できません。

現時点では、PDFの各スライドまたはサーバー側の変換をPNGに埋め込んで、後でスライドに表示するという2つのアプローチがあります。私は現在、これらのアプローチの両方でいくつかの障害に直面しています：

1）最初のアプローチを - 埋め込みPDF

私はpageパラメータを指定して、各スライドでPDFを埋め込みますか？

私が試した

：

をa）のプレーンが

Bを埋め込む）オブジェクト

私はPDFと、次のパラメータ#page=5&toolbar=0&navpanes=0&scrollbar=0&view=fitを使用しました。

結果はほとんど同じです：

• ChromeはマウスオーバーでPDFやディスプレイのスクロールバーだけでなく、いくつかのPDFビューアの背景だけでなく、いくつかのズームボタンをスケーリングdoesntの
• のFirefoxツールバーを表示
• IeとSafariはどちらも必要なものに近いですが、PDFビューアの暗い背景も表示しています

生のPDFを埋め込むためのクロスブラウザの方法はありませんが、ページの一部と同じように見えるようにすることは可能でしょうか？

2）第二のアプローチ：隠密PDF別の形式に（これらは）まだ試していない

私はサーバ側でPDFに変換しますか？

a）ImageMagickでPNGに変換します。欠点 - クライアントはImageMagicとおそらくGhostviewをサーバーにインストールする必要があります。できるだけ避けることをお勧めします。

b）PHP SwfToolsでSWFに変換する。これが期待どおりに実装され、フラッシュサポートが減少しているかどうかは不明ですが、おそらく最善のアプローチではありません。

どうすればいいですか？私のパーソナリティは、できるだけシンプルに保つことを好むでしょう。 誰もが同様の問題に遭遇しましたか？アドバイスをいただけますか？

助けてください！

Answer 1

あなたが実際に第三のオプションを持っている - PDF.js - https://mozilla.github.io/pdf.js/

最も簡単には、PNGにサーバー側の変換になるだろう。カルーセルに埋め込むことで複雑さがなくなり、互換性が最も高くなります。最も汎用性の高いものはおそらくPDF.jsでしょう。 Flashを使用すると、モバイルブラウザが使用できなくなることが懸念されます。

Answer 2

あなたが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>