<div>
<embed src="path/to/your/file.pdf" width="500" height="600" type='application/pdf'>
</div>
この方法では、<embed>
タグを使用してDiv内にPDFを埋め込みます。src
属性にはPDFファイルのパスを指定し、width
とheight
属性で埋め込まれた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を指定し、width
とheight
属性で埋め込まれた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ファイルを表示することができます。適切な方法を選択し、プロジェクトに組み込んでください。