PDFをBase64エンコードしてHTMLのiframeで表示する方法

PDFファイルをBase64エンコードする: まず、PDFファイルをBase64エンコードする必要があります。これには、プログラミング言語やツールによって異なる方法がありますが、一般的には次の手順に従います。

const fs = require('fs');
const path = 'path/to/pdf/file.pdf';
const pdfData = fs.readFileSync(path);
const base64Data = pdfData.toString('base64');

上記の例では、Node.jsのfsモジュールを使用してPDFファイルを読み込み、readFileSync関数を使用してファイルをバイナリデータとして読み込んでいます。次に、toStringメソッドを使用してバイナリデータをBase64文字列に変換します。

HTMLのiframeを使用してBase64エンコードされたPDFを表示する: 次に、HTMLのiframe要素を使用してBase64エンコードされたPDFを表示します。以下は、iframe要素の基本的な構造です。

<iframe src="data:application/pdf;base64,[Base64エンコードされたPDFデータ]" width="100%" height="500px"></iframe>

上記の例では、src属性にdata:application/pdf;base64とBase64エンコードされたPDFデータを指定しています。width属性とheight属性は、iframeの表示サイズを指定するためのものです。

コード例: 以下に、上記の手順を組み合わせたコード例を示します。

<!DOCTYPE html>
<html>
<head>
  <title>Base64エンコードされたPDFを表示する例</title>
</head>
<body>
  <iframe src="data:application/pdf;base64,[Base64エンコードされたPDFデータ]" width="100%" height="500px"></iframe>
</body>
</html>

上記のコード例では、HTMLの基本的な構造に加えて、iframe要素のsrc属性にBase64エンコードされたPDFデータを指定しています。

これで、PDFファイルをBase64エンコードしてHTMLのiframeで表示する方法がわかりました。必要に応じて、実際のPDFファイルのパスや表示サイズを適切に指定してください。