Ajax を使用して PDF ファイルをダウンロードして開くにはどうすればよいですか?

Ajax を使用して PDF ファイルをダウンロードして開く

Web 開発では、ファイルを動的に生成してクライアントにダウンロードするのが一般的です。 Ajax を使用したファイルのダウンロードの処理は、特に PDF などのファイル形式の場合、難しい場合があります。よくある問題の 1 つは、Ajax 呼び出しを使用して PDF ファイルをダウンロードして開くことです。

問題:

ユーザーには、PDF を生成し、適切なコンテンツ タイプを設定するアクション クラスがあります。 。 Ajax 呼び出しを通じてこのアクションを呼び出し、ダウンロードされた PDF ファイルをブラウザーで開こうとしています。ただし、Ajax 呼び出しでは、「ブラウザがこのサーバーが理解できないリクエストを送信しました。」というエラーが発生します。

解決策:

この問題を正常に解決するにはAjax を使用して PDF ファイルをダウンロードして開きます。次の手順に従います。

1. PDF ファイルを生成します。 アクション クラスで、優先ライブラリを使用して PDF ファイルを生成し、適切な

2. JavaScript で Ajax 呼び出しを処理します。

   • XMLHttpRequest オブジェクトを使用して、コンテンツ タイプへの Ajax 呼び出しを開始します。アクション URL。
   • アクション メソッドに従って、リクエスト メソッドを「POST」または「GET」に設定します。

3. サーバー応答を処理します。

   • Ajax 呼び出しの成功コールバック関数で、サーバーの応答を処理します。
   • Blob API を使用して、ダウンロードされた PDF データを表す新しい Blob を作成します。
   • アンカー () 要素を作成し、その href 属性を BLOB のオブジェクト URL に設定します。
   • PDF ファイルに必要なファイル名を指定するには、download 属性を設定します。
   • アンカー要素でクリック イベントをトリガーしてダウンロードを開始し、PDF ファイルを開きます。

<code class="javascript">$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob = new Blob([data]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '<FILENAME_TO_SAVE_WITH_EXTENSION>';
    link.click();
  }
});</code>