質問編集履歴
3
URLミス
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
Laravel8.83.27
|
|
24
24
|
PHP 8.1.17
|
|
25
25
|
使用ブラウザ：Safari/Chrome
|
|
26
|
-
参考にしたサイト：https://kumatech-lab.com/tcpdf-output
|
|
26
|
+
参考にしたサイト：https://kumatech-lab.com/tcpdf-output
|
|
27
|
+
（非同期でダウンロード）
|
|
27
28
|
|
|
28
29
|
### エラー文
|
|
29
30
|
pdf_receipt_head.js:306 Uncaught TypeError: str.blob is not a function
|
2
フローの説明
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
3
|
Laravel8を利用し、WEBアプリを作成しています。
|
|
4
|
+
実現したい流れとしては下記の通りです。
|
|
5
|
+
|
|
6
|
+
①クライアント側でフォームを入力する
|
|
7
|
+
②フォーム入力後、ダウンロードボタンを押させる。
|
|
8
|
+
**③ボタン押下後、サーバーに保存してあるPDFのテンプレートを使用してフォーム内容を書き込み、一度ローカルデバイスに作成したPDFをダウンロードさせる。
|
|
9
|
+
**→こちらが今回の質問項目です。
|
|
10
|
+
④デバイス上にPDFがダウンロードされたのを確認した後、改めて送信用のボタンを押させて内容をPOSTし、データをサーバーに保存する
|
|
11
|
+
|
|
12
|
+
### 聞きたいこと
|
|
13
|
+
|
|
14
|
+
上記③の内容を、下記のやり方で行おうと考えております。
|
|
4
15
|
HTML上で作成したフォームを非同期でPOSTしてPHPにフォーム内容を受け渡し、TCPDFを活用してPDF化。
|
|
5
16
|
その後、PDFを文字列として出力（Output($path, "S")）し、出力した文字列をJSON形式でクライアント側に受け渡します。
|
|
6
17
|
受け取った文字列をjavascriptでBlobの形へ変換し、自動でダウンロードを行おうと考えています。
|
1
「javascriptを用いてPDFを再構築」という表現を変更、「文字列形式のPDFをblobの形に変換」に修正。参考URL追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,15 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
Laravel8を利用し、WEBアプリを作成しています。
|
|
4
4
|
HTML上で作成したフォームを非同期でPOSTしてPHPにフォーム内容を受け渡し、TCPDFを活用してPDF化。
|
|
5
|
-
その後、PDFを文字列として出力（Output($path, "S")）し、出力した文字列をJSON形式でクライアント側に受け渡し
|
|
5
|
+
その後、PDFを文字列として出力（Output($path, "S")）し、出力した文字列をJSON形式でクライアント側に受け渡します。
|
|
6
|
+
受け取った文字列をjavascriptでBlobの形へ変換し、自動でダウンロードを行おうと考えています。
|
|
6
7
|
伺いたいのは下記の点です。
|
|
7
|
-
- [ ] 文字列を
|
|
8
|
+
- [ ] 文字列形式のPDFを受け渡すところまで成功しましたが、その文字列をjavascriptでBlobの形に変換ができません。
|
|
8
9
|
- [ ] タブレットでの運用を考えていますが、Ajaxリクエスト成功時に自動ダウンロードをさせることは可能でしょうか。（Safari使用）
|
|
9
10
|
|
|
10
11
|
### 前提
|
|
11
12
|
Laravel8.83.27
|
|
12
13
|
PHP 8.1.17
|
|
13
14
|
使用ブラウザ：Safari/Chrome
|
|
15
|
+
参考にしたサイト：https://kumatech-lab.com/tcpdf-output（非同期でダウンロード）
|
|
16
|
+
|
|
17
|
+
### エラー文
|
|
18
|
+
pdf_receipt_head.js:306 Uncaught TypeError: str.blob is not a function
|
|
19
|
+
（let blob = str.blob(); →js26行目☓）
|
|
20
|
+
|
|
21
|
+
|
|
14
22
|
|
|
15
23
|
### 該当のソースコード
|
|
16
24
|
|
|
@@ -40,7 +48,16 @@
|
|
|
40
48
|
let str = JSON.stringify(json);
|
|
41
49
|
//↑ここまで成功！
|
|
42
50
|
//↓ここからが分からず。。。。
|
|
51
|
+
let blob = str.blob();
|
|
43
|
-
|
|
52
|
+
const url = URL.createObjectURL(blob);
|
|
53
|
+
const a = document.createElement('a');
|
|
54
|
+
document.body.appendChild(a);
|
|
55
|
+
a.href = url;
|
|
56
|
+
|
|
57
|
+
let filename = 'sample.pdf';
|
|
58
|
+
a.download = filename;
|
|
59
|
+
a.click();
|
|
60
|
+
a.remove();
|
|
44
61
|
|
|
45
62
|
console.log("ajaxでPDFのDL成功！");
|
|
46
63
|
})
|
|
@@ -64,7 +81,6 @@
|
|
|
64
81
|
```PHP
|
|
65
82
|
public function ajax_download(Request $e)
|
|
66
83
|
{
|
|
67
|
-
//DDD("PHP来たよ！");
|
|
68
84
|
//連想配列を作成
|
|
69
85
|
$request = [
|
|
70
86
|
//formの中身を連想配列に変換
|
|
@@ -84,3 +100,8 @@
|
|
|
84
100
|
知識不足な上丸投げな質問しかできず申し訳ありません。。
|
|
85
101
|
もしかしたら基礎的な知識が不足している場合もありますので、必要な情報が他にあればご指摘いただければ幸いです。
|
|
86
102
|
ご教授お願い致します！
|
|
103
|
+
|
|
104
|
+
2023.06.02
|
|
105
|
+
ご指摘をいただき、文章を修正いたしました。
|
|
106
|
+
AbeTakashi様、ご指摘ありがとうございます！
|
|
107
|
+
|