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

将您的PDF文件上传到Google驱动器中，并在iframe中使用其URL（例如Google Drive），并在iframe中使用其URL

<object data="data/test.pdf" type="application/pdf" width="500" height="300">
<a href="data/file.pdf">file.pdf</a>
</object>

另请参见以下链接：-How to Use pdf.js

Answer 2

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

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

我从示例开始，介绍了2个函数（1个用于处理文本文件，1个用于处理PDF文件），看看handlePDFFile函数，您会发现它有点相似，很大区别在于我们将文件读取为reader.readAsDataURL(file);，而不是将其读取为PDF.js库的文本。

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

使用pdf对象，我们将获得第一页并将其呈现到画布上。这只是一个示例，因此如果要查看多个页面（只有第一页进行了硬编码），则需要在此基础上进行构建。

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>

上载pdf档案时如何在浏览器中显示pdf

2 个答案: