サーバーサイドは、Rails6.1で、prawnというgemを使って、pdfデータを作成、
フロントエンドでは、React.jsで、pdfデータをaxiosで取得、ページに出力します。
ネット検索し、以下の方法で実現できました。
PdfInvoice#render はprawnを使ってできたデータを返します。
※コード内部のコメントは私がつけました。
Ruby
1 def invoice 2 respond_to do |format| 3 format.pdf do 4 pdf = PdfInvoice.new(@bills) 5 send_data Base64.encode64(pdf.render), 6 filename: 'i.pdf', 7 type: 'application/pdf' 8 end 9 end 10 end
React.js
1 axios.get(`/api/manager/pdfs/invoice/$(billIds)`) 2 .then(({data}) => { 3 // atobはbase64でデコード 4 const binaryString = atob(data); 5 const len = binaryString.length; 6 // ArrayBuffer 物理メモリの領域(バッファ)を確保するためのクラス 7 const buffer = new ArrayBuffer(len); 8 // Uint8Array 負の数なし(Unsigned)の整数(int)で,要素一つあたり1バイト(8bit = 1byte)の配列(Array) 9 const view = new Uint8Array(buffer); 10 for (let i = 0; i < len; i += 1) { 11 // String.prototype.charCodeAtはUnicodeを10進数に変換するStringのメソッド 12 view[i] = binaryString.charCodeAt(i); 13 } 14 const blob = new Blob([view], {type: 'application/pdf'}); 15 window.open(window.URL.createObjectURL(blob)); 16 }
が、Apiからの出力でBae64でエンコードして、JSで、デコードするなど、なにか無駄な動きが多いようにみえます。
Rails側で[view]の部分まで作るようなことはしないのでしょうか?
そのためのやり方、あるいは、このようにしなければならない理由などありましたらお教えいただけませんでしょうか?
よろしくお願いいたします。
あなたの回答
tips
プレビュー