JavaScriptでブラウザでPDFを開く方法

2024-02-09 06:50 JavaScriptPDFブラウザ

  1. <embed>要素を使用する方法:

    var embed = document.createElement('embed');
embed.src = 'path/to/file.pdf';
embed.type = 'application/pdf';
embed.width = '100%';
embed.height = '100%';
document.body.appendChild(embed);

    この方法では、<embed>要素を作成し、PDFファイルのパスを指定します。その後、要素をドキュメントのボディに追加します。

  2. window.open()を使用する方法:

    window.open('path/to/file.pdf');

    この方法では、window.open()メソッドを使用して新しいウィンドウを開き、PDFファイルのパスを指定します。

  3. <iframe>要素を使用する方法:

    var iframe = document.createElement('iframe');
iframe.src = 'path/to/file.pdf';
iframe.style.width = '100%';
iframe.style.height = '100%';
document.body.appendChild(iframe);

    この方法では、<iframe>要素を作成し、PDFファイルのパスを指定します。その後、要素をドキュメントのボディに追加します。

  4. FileReaderオブジェクトを使用する方法:

    var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'application/pdf';
fileInput.addEventListener('change', function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var pdfData = e.target.result;
var viewerUrl = 'https://example.com/viewer.html#pdf=' + encodeURIComponent(pdfData);
window.open(viewerUrl);
};
reader.readAsDataURL(file);
});
document.body.appendChild(fileInput);

    この方法では、<input type="file">要素を作成し、PDFファイルを選択するためのファイル入力フィールドを表示します。選択されたファイルをFileReaderオブジェクトを使用して読み取り、データURLに変換します。その後、新しいウィンドウを開いてPDFビューアにこのデータURLを渡します。

以上が、JavaScriptを使用してブラウザでPDFを開く方法のいくつかの例です。これらの方法を使用して、PDFファイルをブラウザで表示することができます。