PDFファイルを送信して表示する方法

PDFファイルをアップロードするフォームを作成します。これには、HTMLのフォーム要素を使用します。例えば、以下のようなコードを使用します。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="pdf_file" accept=".pdf">
  <input type="submit" value="送信">
</form>

ファイルを受け取るためのサーバーサイドのスクリプトを作成します。このスクリプトは、フォームから送信されたPDFファイルを受け取り、保存します。例えば、PHPで以下のようなスクリプトを使用します。

<?php
if ($_FILES["pdf_file"]["error"] == UPLOAD_ERR_OK) {
  $temp_name = $_FILES["pdf_file"]["tmp_name"];
  $destination = "uploads/" . $_FILES["pdf_file"]["name"];
  move_uploaded_file($temp_name, $destination);
  echo "ファイルが正常にアップロードされました。";
} else {
  echo "ファイルのアップロード中にエラーが発生しました。";
}
?>

PDFファイルを表示するためのビューアーを準備します。一般的な方法は、PDF.jsと呼ばれるJavaScriptライブラリを使用することです。以下の手順でPDF.jsを導入します。

a. PDF.jsのソースコードをダウンロードし、適切な場所に配置します。 b. HTMLファイルにPDF.jsを読み込むスクリプトを追加します。

<script src="path/to/pdf.js"></script>

ビューアーを表示するためのHTML要素を作成します。例えば、以下のようなコードを使用します。

<div id="pdf-viewer"></div>

JavaScriptを使用して、ビューアーを初期化し、PDFファイルを表示します。以下のようなコードを使用します。

<script>
  var pdfViewer = document.getElementById('pdf-viewer');
  var pdfPath = 'path/to/uploaded/pdf/file.pdf';
  // PDF.jsの初期化
  PDFJS.workerSrc = 'path/to/pdf.js.worker.js';
  PDFJS.getDocument(pdfPath).then(function(pdf) {
    // 最初のページを表示
    pdf.getPage(1).then(function(page) {
      var viewport = page.getViewport({ scale: 1 });
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      pdfViewer.appendChild(canvas);
      page.render({ canvasContext: context, viewport: viewport });
    });
  });
</script>

これで、PDFファイルを送信して表示する準備が整いました。適切なファイルのアップロード先やパスを指定し、上記のコードを適宜調整してください。また、サーバーサイドの処理やセキュリティ対策にも注意して実装してください。

以上がPDFファイルを送信して表示する方法の基本的な手順です。必要に応じて、デザインのカスタマイズや追加機能の実装など、さらなる改善や拡張も行えます。