javascript - 如何将上传的 pdf 文件传递给变量。 (PDF.JS)-6ren

javascript - 如何将上传的 pdf 文件传递给变量。 (PDF.JS)

转载作者：行者123 更新时间：2023-11-28 01:28:42

引用:http://git.macropus.org/2011/11/pdftotext/example/

在这个项目中，开发人员将 pdf 作为输入并将其传递给变量“input”。 我想创建一个上传菜单/dropzone，这样任何人都可以上传他们的 pdf，它会自动传递给变量“input”，然后可以提取文本。 我可以上传文件 但不知道如何将该 pdf 传递给变量“input”。

<body>
    <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
          <div id="drop">
            Drop Here
                <a>Browse</a>
            <input id="inputx" src="./"type="file" name="upl" multiple />
          </div>

          <ul>
            <!-- The file uploads will be shown here -->
          </ul>

        </form>

现在使用此表单将上传 pdf，现在我们必须将变量“input”传递给它。

          <script>     
          var input = document.getElementById("input");
          var processor = document.getElementById("processor");
          var output = document.getElementById("output");

          window.addEventListener("message", function(event){
            if (event.source != processor.contentWindow) return;

            switch (event.data){
              case "ready":
                var xhr = new XMLHttpRequest;
                xhr.open('GET', input.getAttribute("src"), true);
                xhr.responseType = "arraybuffer";

                xhr.onload = function(event) {
                  processor.contentWindow.postMessage(this.response, "*");
                };

                xhr.send();

              break;

              default:
                 output.innerHTML = event.data.replace(/\s+/g, " ");
                break;
            }
          }, true);
          </script>
    </body>

最佳答案

您只需将 Pdf.js 指向您上传的文件的副本。

在您上面的代码中，Pdf.js 通过 XMLHttpRequest 获取其数据，其中它查找文件名定义为 ID 为 input< 的元素的 src 属性的 .pdf/:

xhr.open('GET', input.getAttribute("src"), true);

如果您将此元素上的 src 属性设置为您上传到服务器的 pdf 文件路径，那么脚本应该按原样运行。

下面是一些可能对您有帮助的代码 - index.html 是一个简单的文件上传表单，它调用 PHP 将文件上传到与它 (index.html) 相同的目录中) 服务自。 file_upload.php 保存上传的文件并使用以下行设置 iframe 上的 src 属性的值:

<iframe id="input" src= <?php print $_FILES['userfile']['name'] ?> ></iframe>

index.html

<html>
<head>
  <title>Converting PDF To Text using pdf.js</title>
</head>

<body>
  <div>
    <!-- the PDF file must be on the same domain as this page -->
    <form enctype="multipart/form-data" action="file_upload.php" method="POST">
      <input id="fileInput" type="file" name="userfile"></input>
      <input type="submit" value="Submit">
    </form>
  </div>

</body>
</html>

file_upload.php

<?php

$uploadfile = basename($_FILES['userfile']['name']);

echo '<pre>';
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Possible file upload attack!\n";
}

echo 'Here is some more debugging info:';
print_r($_FILES);

print "</pre>";

?>

<html>
<head>
  <title>Converting PDF To Text using pdf.js</title>
  <style>
  html, body { width: 100%; height: 100%; overflow-y: hidden; padding: 0; margin: 0; }
  body { font: 13px Helvetica,sans-serif; }
  body > div { width: 48%; height: 100%; overflow-y: auto; display: inline-block; vertical-align: top; }
  iframe { border: none; width: 100%; height: 100%; }
  #output { padding: 10px; box-shadow: 0 0 5px #777; border-radius: 5px; margin: 10px; }
  #processor { height: 70px; }
  </style>
</head>

  <div>
    <!-- embed the pdftotext web app as an iframe -->
    <iframe id="processor" src="../"></iframe>

    <!-- a container for the output -->
    <div id="output"><div id="intro">Extracting text from a PDF file using only Javascript.<br>Tested in Chrome 16 and Firefox 9.</div></div>
  </div>

  <div>
    <iframe id="input" src= <?php print $_FILES['userfile']['name'] ?> ></iframe>
  </div>

  <script>
  var input = document.getElementById("input");
  var processor = document.getElementById("processor");
  var output = document.getElementById("output");

  window.addEventListener("message", function(event){
    if (event.source != processor.contentWindow) return;

    switch (event.data){
      case "ready":
        var xhr = new XMLHttpRequest;
        xhr.open('GET', input.getAttribute("src"), true);
        xhr.responseType = "arraybuffer";

        xhr.onload = function(event) {
          processor.contentWindow.postMessage(this.response, "*");
        };

        xhr.send();
      break;

      default:
        output.textContent = event.data.replace(/\s+/g, " ");
      break;
    }
  }, true);
  </script>

</body>
</html>