質問: ### 前提・実現したいこと ``` JavaScriptでAPIにJson形式のデータをPOSTして、APIからPDF形式の データを返してブラウザで表示させたいと思っています。ブラウザで表示させる とき、元のリクエスを送出したページはそのままで、PDF用のページを新規で オープンさるという仕様を想定しています。 また、可能なら一時ファイルを作成せずにそのままのレスポンスがダイレクトに PDF表示に繋がるとベストだと思っています。 この時、JavaScriptでAPIにJson形式のデータをPOSTしつつ、新規ページを オープンさせつつ、かつその新規ページはPDFを表示させるという方法について、 この辺りの知見に詳しい方のアドバイスを頂きたいです。 【追記】 「JSON形式のデータをPOSTする」の前段として、なりの要素で可変の 値を受け取り、それをJSON形式に組み直してPOSTしたいです。試した事のところで 長くなるので削除しちゃってますが、JSONdataの中には前段でクリックと同時に formの値をさらって、{ key : value、 key : value } に整形する処理を 入れています。 ``` ### 試したこと Jqueryで普通に$.ajaxとかでリクエストするので今色々試してみてます。 ``` $.ajax({ type : 'post', url : '/hoge', data : JSON.stringify(JSONdata), contentType: 'application/JSON', dataType : 'JSON', scriptCharset: 'utf-8', ↓これだとダメなのは解ってるけどどうすれば良いかが解りませんでした。 ※ href.locationを使って、一時ファイルをどこかに作成し、リンク先に 遷移させるとかはやりたくない。 success : function(data) { $("#response").html(JSON.stringify(data)); }, error : function(data) { $("#response").html(JSON.stringify(data)); } }); ``` ### 補足情報(言語/FW/ツール等のバージョンなど) 想定している環境は以下です。 ・Python 2.7.10 ・libharu (PDF生成ライブラリ) 【本番】 ・PDF生成のAPIをAWSのLambdaで提供 ・JSONでデータを与えるとそのデータを差し込んだPDFを返す 【開発環境】 ・API部分を簡易に実現する環境としてPythonのFalconを使用 ・POSTでJSONを投げる部分はJqueryを使って投げてます。
回答: 私の今やっているwebサービスで、半年前ほどに実装しました(私は指示だけで実際に実装したのは他のメンバですが...) APIはレスポンスヘッダをContent-Type:application/pdfで返し、 レスポンス本文にpdfのバイナリをそのまま渡します フロントエンドでは、ダウンロードみたいなボタンがaタグになってまして、 aタグのhrefに上記のAPI(pdfバイナリを返す)を指定し、targetは_blankとしています で、ダウンロードボタンを押すと、別ウインドウでpdfが開くようになってます