Base64 は、バイナリ データをネットワーク経由で送信できるようにテキスト形式に変換するために一般的に使用されるエンコード方法です。 PDF(Portable Document Format、Portable Document Format)は、文書の提示や交換に使用される形式です。
JavaScript プログラミングでは、ブラウザーで PDF ドキュメントを表示またはダウンロードできるように、Base64 でエンコードされたデータを PDF 形式に変換する必要がある場合があります。この記事では、JavaScriptを使用してBase64エンコードをPDF形式に変換する方法を説明します。
まず、Base64 エンコード データを取得する必要があります。これは、バックエンド サーバーや Web API からデータを取得したり、フロントエンドのフォームやユーザー インタラクションからデータを取得したりするなど、さまざまな方法で実現できます。
この例では、base64Data という文字列変数を使用して、Base64 でエンコードされたデータを表します。このデータを表すサンプル コードは次のとおりです。
var base64Data = "JVBERi0xLjMKJcfs...";
次に、Base64 でエンコードされたデータをバイナリ形式に変換する必要があります。これは、window.atob() 関数を使用することで実現できます。この関数は、Base64 でエンコードされた文字列を受け取り、その文字列のバイナリ データを表す文字列を返します。
以下は、Base64 データをバイナリ形式に変換するサンプル コードです。
var binaryData = window.atob(base64Data);
次に、 BLOB オブジェクト。不変の生データ ファイルのようなオブジェクトを表します。 BLOB オブジェクトは、Web アプリケーションの AJAX データ転送でよく使用されます。
以下は、Blob オブジェクトを作成するサンプル コードです。
var blob = new Blob([binaryData], { type: "application/pdf" });
ここでは、binaryData 文字列を配列パラメーターとして Blob コンストラクターに渡します。また、MIME タイプを「application/pdf」として指定しました。これは、PDF ファイル形式で Blob オブジェクトを作成していることを示しています。
Blob オブジェクトを作成したら、ブラウザ ウィンドウからアクセスできるように、それを URL 形式に変換する必要があります。この URL は、window.URL.createObjectURL() メソッドを使用して作成できます。
次は、Blob オブジェクトを URL 形式に変換するサンプル コードです。
var url = window.URL.createObjectURL(blob);
これは、Blob オブジェクトを表す URL 文字列を返します。
URL を作成したので、それを HTML ページ上のリンク要素にリンクして、表示またはダウンロードできます。この PDF ファイルをブラウザでダウンロードします。
次は、PDF ファイルを HTML ページ上のリンク要素にリンクするサンプル コードです:
var link = document.createElement('a'); link.href = url; link.download = "file.pdf"; link.click();
ここでは、「link」という名前の新しいリンク要素を作成し、その href を設定しています。このプロパティは、以前に作成した URL に設定されます。また、リンクをクリックしたときにファイルをダウンロードできるようにする download 属性も指定します。最後に、link.click() を使用してこのリンク要素をクリックし、ブラウザーでこの PDF ファイルを表示またはダウンロードできるようにします。
概要
この記事では、JavaScript を使用して Base64 でエンコードされたデータを PDF 形式に変換し、その PDF ファイルをブラウザーで表示およびダウンロードする方法を紹介しました。これらの手順には、Base64 エンコードからのデータの取得、データのバイナリ形式への変換、Blob オブジェクトの作成、ObjectURL の作成、HTML ページ上の PDF ファイルのリンクが含まれます。これを行うときは、データ型の検証、エラー処理、セキュリティなどのベスト プラクティスに従ってください。
以上がBase64からPDFへのJavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。