Ajaxでフォームの内容をPHPに渡してPDFを作成し文字列を引き渡し、受け取った文字列をjavascriptでPDF化したい

Question

実現したいこと

Laravel8を利用し、WEBアプリを作成しています。
実現したい流れとしては下記の通りです。

①クライアント側でフォームを入力する
②フォーム入力後、ダウンロードボタンを押させる。
**③ボタン押下後、サーバーに保存してあるPDFのテンプレートを使用してフォーム内容を書き込み、一度ローカルデバイスに作成したPDFをダウンロードさせる。
**→こちらが今回の質問項目です。
④デバイス上にPDFがダウンロードされたのを確認した後、改めて送信用のボタンを押させて内容をPOSTし、データをサーバーに保存する

聞きたいこと

上記③の内容を、下記のやり方で行おうと考えております。
HTML上で作成したフォームを非同期でPOSTしてPHPにフォーム内容を受け渡し、TCPDFを活用してPDF化。
その後、PDFを文字列として出力（Output($path, "S")）し、出力した文字列をJSON形式でクライアント側に受け渡します。
受け取った文字列をjavascriptでBlobの形へ変換し、自動でダウンロードを行おうと考えています。
伺いたいのは下記の点です。

• 文字列形式のPDFを受け渡すところまで成功しましたが、その文字列をjavascriptでBlobの形に変換ができません。
• タブレットでの運用を考えていますが、Ajaxリクエスト成功時に自動ダウンロードをさせることは可能でしょうか。（Safari使用）

前提

Laravel8.83.27
PHP 8.1.17
使用ブラウザ：Safari/Chrome
参考にしたサイト：https://kumatech-lab.com/tcpdf-output
（非同期でダウンロード）

エラー文

pdf_receipt_head.js:306 Uncaught TypeError: str.blob is not a function
（let blob = str.blob();　→js26行目☓）

該当のソースコード

$("#download").click(function () {
  var formdata = new FormData($('#form-id')[0]);

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }, //Headers 必須。呪文
    url: "{{ route('ajaxdownload.post') }}",
    method: 'POST', //リクエストタイプ
    dataType: 'JSON',
    data: form,
    processData: false,
    contentType: false,
    data: formdata,
    //リクエストが完了するまで実行される
    beforeSend: function () {
      document.getElementById('download_message').innerHTML = "ダウンロード中。。。";
    }
  })
    // Ajaxリクエスト成功時の処理
    .done(function (json) {
      console.log(json);
      let str = JSON.stringify(json);
//↑ここまで成功！
//↓ここからが分からず。。。。
        let blob = str.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;

        let filename = 'sample.pdf';
        a.download = filename;
        a.click();
        a.remove();

      console.log("ajaxでPDFのDL成功！");
    })
    // Ajaxリクエスト失敗時の処理
    .fail(function (jqXHR, textStatus, errorThrown) {
      alert('ダウンロードに失敗しました。本ページのスクリーンショットを保存し、送信ボタンを押してください。');
      console.log("ajax通信に失敗しました。Chromeコンソール画面のプレビューからエラー詳細を確認してください。");
      console.log("jqXHR          : " + jqXHR.status); // HTTPステータスが取得
      console.log("textStatus     : " + textStatus);    // タイムアウト、パースエラー
      console.log("errorThrown    : " + errorThrown.message); // 例外情報
      document.getElementById('download_message').innerHTML = "ダウンロード失敗。スクリーンショットを撮ってください。";
    })
    // 成否にかかわらず実行
    .always(function () {
      $('#post_button').show();
    })

})

public function ajax_download(Request $e)
    {
        //連想配列を作成
        $request = [
          //formの中身を連想配列に変換
        ];
        $pdfdata = $this->pdf_export($request);　//←このfunctionの中でnew TCPDF_FONTS();し、受け取ったformの内容を座標指定してPDFを作成
        $pdf = $pdfdata["pdf"];
        $path = $pdfdata["path"];//PDFの格納先のpath
        $JSON_PDF = mb_convert_encoding($pdf->Output($path, "S"), 'UTF-8', 'UTF-8');
        $array = ['JSON_PDF' => $JSON_PDF];
        //json形式で返却
        return response()->json($array);
    }

補足情報（FW/ツールのバージョンなど）

知識不足な上丸投げな質問しかできず申し訳ありません。。
もしかしたら基礎的な知識が不足している場合もありますので、必要な情報が他にあればご指摘いただければ幸いです。
ご教授お願い致します！

2023.06.02
ご指摘をいただき、文章を修正いたしました。
AbeTakashi様、ご指摘ありがとうございます！

Comments

[AbeTakashi]

この質問文で具体的に何をしたいかが伝わってないと思います。特に「javascriptを用いてPDFを再構築」「javascriptでどうやってPDF形式に直せばいいのか」あたりの表現は他人に伝わる表現ではなく、これだけの情報量だと（エスパーが登場しない限りは）回答できる人がいないかと思います。

やりたいことが伝わるように参考画像、フローチャートやシーケンス図、似たようなサービスをしてるところがあればそれらの参考URLなどがあると、答えられる人がいるかもしれません。これらの情報を質問文を編集して追記することをオススメします。

[yambejp]

状況がわからないのですが、サーバー側で一旦pdf化してそれを文字列にしてクライアントに返すなら、最初からpdf化なんてしなければいいのでは？

[coool]

＞AbeTakashi様
ご指摘ありがとうございます！
申し訳ありません。。
自分でも理解しきれておらず、的確な質問ができていませんでした。
編集いたしました。

＞yambejp様
やりたいことの全体像のご説明ができておりませんでした。
分かりにくく申しわけありません。。
フローの追記をいたしました。

[Lhankor_Mhy]

文字列形式のPDFとは、どのようなフォーマットですか？
PHPは全く詳しくないのですが、普通にバイナリやBase64で送信することはできないのでしょうか。

[coool]

＞Lhankor_Mhy様
TCPDFで出力をする「Output」関数を使用する際、出力形式は下記の5種類から選べるそうです。
「I」・・・表示
「D」・・・ダウンロード
「F」「FI」「FD」・・・ファイル作成　「FI」は表示も 「FD」はダウンロードも
「E」・・・メール用文字列を返却
「S」・・・文字列を返却

base64も考えはしたのですが、TCPDFで出力できる形式がどれもしっくりこず。
一旦今回はこちらのサイトの通りに出力形式「S」を利用してクライアント側でblobの形にする方法を試しています。
（https://kumatech-lab.com/tcpdf-output　）
お恥ずかしい話ですが、実際のところ私自身「文字列形式のPDF」がどのようなフォーマットか理解ができておりません。
申し訳ございません。。
「D」も試してはみましたが、うまくいきませんでした。

[Lhankor_Mhy]

あー、「参考にしたサイト」を拝見して、なんとなく、たぶん、バイナリかな？　という気分になりました。
それで、jQuery は blob を扱えないから JSON で渡しているのですね。
たぶん、jQuery を諦めて、「参考にしたサイト」のように処理するのが早いですが、jQuery は必須条件なのですか？

[Lhankor_Mhy]

もし、どうしても jQuery でバイナリやblobを受信したい、ということであれば、なんらかのプラグインが必要になるような気がします。（最新のバージョンまではキャッチアップしてませんが、少なくとも2系ぐらいまでは）
この辺りが参考になるのでは。
https://qiita.com/yuma84/items/fefb95c1a10396070cd2

あと、メールの添付ファイルはBase64なので、「メール用文字列」というのはワンチャンあるのでは、という感想を持ちました。

[coool]

Laravelを利用した際の書き方がjQueryを使用したものしか見たことがなかったので、jQueryに固執していました。ちょっと試してみます！

[coool]

＞Lhankor_Mhy様
参考サイトまでありがとうございます！

[coool]

＞Lhankor_Mhy様

ありがとうございます！！！！
https://github.com/henrya/js-jquery/tree/master/BinaryTransport
こちらを追加したところ、PC上ではうまくいきました！！！！！
残念ながらSafariではDLしたはずのPDF形式がHTMLになってしまいうまく表示されませんでしたが、PC上で動作を確認できただけで一歩前進することができました。
ありがとうございます！

[Lhankor_Mhy]

お役に立てたのなら何よりです。

ご解決でしたら、自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself

Answer 1

Jqueryはバイナリを取得できないため、JSON形式での引き渡しを行おうとして詰まっていました。
しかしこちらの記事を参考にしてバイナリをJqueryで取得できる関数の読み込みを行った結果、無事ダウンロードが完了しました！
Lhankor_Mhy様、そしてアドバイスを頂けた皆様、本当にありがとうございます！

 $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }, //Headers 必須。呪文
    url: "{{ route('ajaxdownload.post') }}",
    method: 'POST', //リクエストタイプ
    dataType: 'JSON',
    data: form,
    processData: false,
    contentType: false,
    data: formdata,
    //リクエストが完了するまで実行される
    beforeSend: function () {
      document.getElementById('download_message').innerHTML = "ダウンロード中。。。";
    }
  })
    // Ajaxリクエスト成功時の処理
    .done(function (json) {
      console.log(json);
    const url = URL.createObjectURL(json);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;

        let filename = 'sample.pdf';
        a.download = filename;
        a.click();
        a.remove();
        document.getElementById('download_message').innerHTML = "ダウンロードに成功しました！<br><span class='text-danger fw-bold'>続いて送信ボタンを押してください。</span>";
    })
    // Ajaxリクエスト失敗時の処理
    .fail(function (jqXHR, textStatus, errorThrown) {
      alert('ダウンロードに失敗しました。本ページのスクリーンショットを保存し、送信ボタンを押してください。');
      console.log("ajax通信に失敗しました。Chromeコンソール画面のプレビューからエラー詳細を確認してください。");
      console.log("jqXHR          : " + jqXHR.status); // HTTPステータスが取得
      console.log("textStatus     : " + textStatus);    // タイムアウト、パースエラー
      console.log("errorThrown    : " + errorThrown.message); // 例外情報
      document.getElementById('download_message').innerHTML = "ダウンロード失敗。スクリーンショットを撮ってください。";
    })
    // 成否にかかわらず実行
    .always(function () {
      $('#post_button').show();
    })

})
/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0
* @author Henry Algus <[e-mail]>
*https://qiita.com/yuma84/items/fefb95c1a10396070cd2
*
*/

(function ($, undefined) {
  "use strict";

  // use this transport for "binary" data type
  $.ajaxTransport("+binary", function (options, originalOptions, jqXHR) {
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
      return {
        // create new XMLHttpRequest
        send: function (headers, callback) {
          // setup all variables
          var xhr = new XMLHttpRequest(),
            url = options.url,
            type = options.type,
            async = options.async !== false,
            // blob or arraybuffer. Default is blob
            dataType = options.responseType || "blob",
            data = options.data || null,
            username = options.username || null,
            password = options.password || null;

          xhr.addEventListener('load', function () {
            var data = {};
            data[options.dataType] = xhr.response;
            // make callback and send data
            callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
          });
          xhr.addEventListener('error', function () {
            var data = {};
            data[options.dataType] = xhr.response;
            // make callback and send data
            callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
          });

          xhr.open(type, url, async, username, password);

          // setup custom headers
          for (var i in headers) {
            xhr.setRequestHeader(i, headers[i]);
          }

          xhr.responseType = dataType;
          xhr.send(data);
        },
        abort: function () { }
      };
    }
  });
})(window.jQuery);

public function ajax_download(Request $e)
    {
        //連想配列を作成
        $request = [
          //formの中身を連想配列に変換
        ];
        $pdfdata = $this->pdf_export($request);　//←このfunctionの中でnew TCPDF_FONTS();し、受け取ったformの内容を座標指定してPDFを作成
        $pdf = $pdfdata["pdf"];
        $path = $pdfdata["path"];//PDFの格納先のpath
//JSON形式での引き渡しをやめて、そのままreturn
　　　$PDF = $pdf->Output($path, "S");
        return $PDF;
            }

Answer 2

非同期で受け取ったpdfファイルを別のサーバーに非同期でおくればよいのでしょうか？
（pdfをPHPで作る部分は命題がブレるので最初からpdfファイルがあるものとして回答）

<script>
let blob=null;
document.addEventListener('click',async ({target})=>{
  if(target.matches('#get')){
    blob=await fetch('test.pdf').then(res=>res.blob());
    const src=await new Promise(resolve => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
    document.querySelector('iframe').src=src;
  }
  if(target.matches('#send') && blob){
    const body = new FormData();
    body.append("myfile",blob,"new.pdf");
    fetch("upload.php",{method:"post",body}).then(res=>res.text()).then(console.log);
  }
});
</script>

<input type="button" value="get" id="get">
<iframe src=""></iframe>
<input type="button" value="send" id="send">

※上記iframeにpdfを表示する必要はありませんが

Comments

[coool]

回答ありがとうございます！
わかりにくい説明で申し訳ありません…
①非同期で受け取ったPDFファイルを一回デバイスに保存
②ダウンロード完了後、別のサーバーに同期処理で送る

という処置を行いたかったです。
未熟な質問で本当にお恥ずかしいばかりです。。。
アドバイスを頂いたことを踏まえて再度コードを書いたところ無事ダウンロードは動いたため、自己完結という形でクローズさせていただきます。
色々とお知恵をいただき、ありがとうございます！
いただいたコードは今後の参考にさせていただきたいと思います。
本当にありがとうございました！