PHPコードを使用してDiv内のPDFを読み込む方法


<div>
  <embed src="path/to/your/file.pdf" width="500" height="600" type='application/pdf'>
</div>

この方法では、<embed>タグを使用してDiv内にPDFを埋め込みます。src属性にはPDFファイルのパスを指定し、widthheight属性で埋め込まれたPDFのサイズを指定します。

方法2: Google ドキュメントを使用する方法

<div>
  <iframe src="https://docs.google.com/gview?url=path/to/your/file.pdf&embedded=true" width="500" height="600" frameborder="0"></iframe>
</div>

この方法では、Google ドキュメントを使用してPDFを表示します。src属性にはGoogle ドキュメントのURLを指定し、widthheight属性で埋め込まれたPDFのサイズを指定します。

方法3: PDF.js ライブラリを使用する方法

まず、PDF.jsライブラリをダウンロードし、プロジェクトに組み込みます。次に、以下のコードを使用してDiv内にPDFを表示します。

<div>
  <canvas id="pdfRenderer"></canvas>
</div>
<script src="path/to/pdf.js"></script>
<script>
  var url = 'path/to/your/file.pdf';
  var pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.getDocument(url).promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
      var canvas = document.getElementById('pdfRenderer');
      var context = canvas.getContext('2d');
      var viewport = page.getViewport({scale: 1});
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      page.render({
        canvasContext: context,
        viewport: viewport
      });
    });
  });
</script>

この方法では、PDF.jsライブラリを使用してPDFを表示します。<canvas>要素をDiv内に追加し、JavaScriptコードでPDFをレンダリングします。url変数にはPDFファイルのパスを指定します。

以上の方法を使用して、Div内にPDFファイルを表示することができます。適切な方法を選択し、プロジェクトに組み込んでください。