1

srcドロップされた画像ファイルをプレビューするように画像のを設定できますが、PDFはどうですか？

（プレビューサムネイルでない場合は、少なくともファイルタイプのアイコンはどうですか？）

4

2 に答える 2

1

明らかに、PDFファイルはWebに準拠していないため、これらのタイプのファイルを処理するのに役立つ外部ライブラリを使用する必要があります。非常によく知られているのは、MozillaPDFJSライブラリです。

次に、PDFファイルの最初のページのプレビューを実行します。

//
// Asynchronous download PDF as an ArrayBuffer
//
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
  if (file = document.getElementById('pdf').files[0]) {
    fileReader = new FileReader();
    fileReader.onload = function(ev) {
      // console.log(ev);
      PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
        //
        // Fetch the first page
        //
        // console.log(pdf)
        pdf.getPage(1).then(function getPageHelloWorld(page) {
          var scale = 0.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 task = page.render({
            canvasContext: context,
            viewport: viewport
          })
          task.promise.then(function() {
            // console.log(canvas.toDataURL('image/jpeg'));
          });
        });
      }, function(error) {
        // console.log(error);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
}
<script src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>

<canvas id="the-canvas" style="border:1px solid black"></canvas>
<input id='pdf' type='file' />

于 2017-05-19T09:13:22.547 に答える
0

これを実装する方法は、PDFのアップロードを行って保存するときにファイルタイプを取得することです。レコードを表示するときは、ファイルタイプを確認するだけです。

于 2012-08-18T20:42:47.863 に答える