javascript - 我可以使用 HTML5 文件 API 预览 PDF 吗？

Question

我可以设置图像的 src 来预览放置的图像文件，但 pdf 怎么样？

(如果不是预览缩略图，那么至少文件类型图标怎么样？)

Answer 1

显然，PDF 文件不兼容 Web，因此我们必须使用外部库来帮助我们处理这些类型的文件。一个非常著名的是Mozilla PDF JS library 。

现在预览 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' />