javascript - 如何在上传pdf文件时在浏览器中显示pdf文件

Question

我正在开发一个项目，我想在我的网页中显示 pdf 文件和文本文件

我确实设法显示了文本文件的内容。

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  for (var i = 0, f; f = files[i]; i++) {

    var reader = new FileReader();
    reader.onload = (function(reader) {
      return function() {
        var contents = reader.result;
        var lines = contents.split('\n');

        document.getElementById('container').innerHTML = contents;
      }
    })(reader);

    reader.readAsText(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" name="file" />

<div class="container">
  <div class="backdrop">
    <div class="highlights"></div>
  </div>
  <textarea id="container" style="height: 500px; min-width: 500px"></textarea>
</div>

我想同时显示文本文件和PDF文件，谢谢你们的帮助

Answer 1

您可以使用PDF.js这是由 Mozilla Labs 社区开发和支持的。

看看他们的例子 "Rendering the Page"是这里的金票。

我通过分解 2 个函数(1 个用于处理文本文件，1 个用于处理 PDF 文件)开始示例。看一下 handlePDFFile 函数，您会发现它有些相似，一个很大的区别是我们将文件读取为 reader.readAsDataURL(file);而不是将其作为 PDF.js 库的文本读取。

对于 PDF 路径，您仍然需要读取文件并将文件内容发送到 pdfjsLib.getDocument 函数。加载后promise解决后，您将能够处理 pdf 对象。

使用 pdf 对象，我们获得第一页并将其渲染到 Canvas 上。这只是一个示例，因此如果您想查看多个页面(只有第一页是硬编码的)，则需要在此基础上进行构建。

const PDF_TYPE = "application/pdf";
const TXT_TYPE = "text/plain";

document.getElementById('files').addEventListener('change', handleFileSelect, false);


function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  for (var i = 0, f; f = files[i]; i++) {
    let fileType = files[i].type;
    if (fileType === PDF_TYPE) {
      handlePDFFile(files[i]);
    } else if (fileType === TXT_TYPE) {
      handleTxtFile(files[i])
    } else {
      console.error(`cannot handle file type: ${fileType}`)
    }
  }
}

function handleTxtFile(file) {
  var reader = new FileReader();
  reader.onload = (function(reader) {
    return function() {
      var contents = reader.result;
      var lines = contents.split('\n');

      document.getElementById('container').innerHTML = contents;
    }
  })(reader);

  reader.readAsText(file);
}

function handlePDFFile(file) {
  var reader = new FileReader();

  reader.onload = (function(reader) {
    return function() {
      var contents = reader.result;
      var loadingTask = pdfjsLib.getDocument(contents);

      loadingTask.promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
          var scale = 1.5;
          var viewport = page.getViewport({
            scale: scale,
          });

          var canvas = document.getElementById('the-canvas');
          var context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext);
        });
      });
    }
  })(reader);
  reader.readAsDataURL(file);
}

#the-canvas {
  outline: black 3px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
<input type="file" id="files" name="file" />

<div class="container">
  <div class="backdrop">
    <div class="highlights">

    </div>
  </div>
  <textarea id="container" style="height: 200px; min-width: 200px"></textarea>
  <canvas id="the-canvas"></canvas>
</div>