やりたいこと
Laravel + Nuxt.jsでQRコードダウンロード機能を実装したいです.
現状できていること
php
1 public function getQrCode() 2 { 3 $parkingSpace = url('https://www.google.com/?hl=ja'); 4 $qrcodeImage = base64_encode(QrCode::format('png')->size(300)->generate($parkingSpace)); 5 return response($qrcodeImage); 6 } 7``` 8```Vue 9 async download() { 10 await this.$axios 11 .get("/api/admin/qrcode", { 12 responseType: "blob", 13 }) 14 .then((response) => { 15 const blob = new Blob([response.data], { 16 type: "application/octet-stream", 17 }) 18 const url = (window.URL || window.webkitURL).createObjectURL(blob) 19 const a = document.createElement("a") 20 a.href = url 21 a.download = ".png" 22 // aタグ要素を画面に一時的に追加する 23 document.body.appendChild(a) 24 a.click() 25 // 不要になったら削除. 26 document.body.removeChild(a) 27 console.log("aaaaaaaaaa") 28 }) 29 },
downloadメソッドが発火したら、https://www.google.com/?hl=のQRコードがpngでダウンロードできるようにしたいです。
気になる点、解決したい点。
API側で、下記のようなJSONが返ってきているがこれは正しいのでしょうか?
{ "status": true, "messages": null, "data": { "headers": {}, "original": "iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFKElEQVR4nO3dwXLbRhBAwUiV//9kVQ4+OJU4SAJB82bF7qvLIgjy1R6Gu3j7+Pj4Dei81xcAr06EEBMhxEQIMRFCTIQQEyHERAgxEUJMhBATIcRECDERQkyEEBMhxEQIMRFCTIQQEyHERAgxEUJMhBATIcRECDERQkyEEBMhxEQIMRFCTIQQEyHERAgxEUJMhBATIcRECLHfh1/v/f3g7D8+Pv7pny7e18X/umf/a33XT/mLHHyz4HsQIcRECDERQkyEEBMhxEQIMRFCbHpYf2F+SPpL9wbNJtfVH7xn1Yey6FLgNYkQYiKEmAghJkKIiRBiIoSYCCG2aFh/4fHR6uQO9HvuXeHjvzSYtOQezrMSQkyEEBMhxEQIMRFCTIQQEyHERAixM4b1/NnRE3n+zkoIMRFCTIQQEyHERAgxEUJMhBATIcQM67/ckin5y+5b389KCDERQkyEEBMhxEQIMRFCTIQQEyHEzhjW758LP35q/cUfnHytSUsuY56VEGIihJgIISZCiIkQYiKEmAghJkKILRrWP771e9LkKPzo1zr6U/4i7gjERAgxEUJMhBATIcRECDERQkyEEHt72e3MGywZu9/jm/MUKyHERAgxEUJMhBATIcRECDERQkyEEJveWT+5sXryuPjJHeiPT8nvva/9m+4nP6/PsBJCTIQQEyHERAgxEUJMhBATIcRECLFFx+DfG61emHwi/H5L3teSwwSW3I0frIQQEyHERAgxEUJMhBATIcRECDERQmzRsP7C43P8C/s3jC850H7VvPuX9l/hD1ZCiIkQYiKEmAghJkKIiRBiIoSYCCG26Jn192bQk9e/5Az/oy9j8gcPe77b16yEEBMhxEQIMRFCTIQQEyHERAgxEUJseli/f+o6OQq/5+gB+j2TP13wzHp4OSKEmAghJkKIiRBiIoSYCCEmQoi96M76e2fd738GugH6f7Tqo7QSQkyEEBMhxEQIMRFCTIQQEyHERAix7/zM+v0bxh+/+CU3avLO7z+r4V9ZCSEmQoiJEGIihJgIISZCiIkQYiKE2PSwfv+W9slN3Ps9fvFLNt3bWQ/8JEKIiRBiIoSYCCEmQoiJEGIihNj0sH7JjuYlj31/3OO/hXj8Mpb8wVW+83uDI4gQYiKEmAghJkKIiRBiIoSYCCG26Jn1R1syTT762e6Tpy7YWQ/8JEKIiRBiIoSYCCEmQoiJEGIihNiiY/D3uxjjTk54H3+2+5Kx++NO+bKdcZXwjYkQYiKEmAghJkKIiRBiIoSYCCE2Pay/sGSP//4j3O/dqMlj8Cc/yiVfm8+wEkJMhBATIcRECDERQkyEEBMhxEQIsUXD+gtHT5MvTA7QH7+MySt8/Kz7C47Bh5cjQoiJEGIihJgIISZCiIkQYiKE2BnD+v2WnLg+ef785HPkLyy5859x/BuA04kQYiKEmAghJkKIiRBiIoSYCCFmWP/l9o+nJ2fr93yD7fMXrIQQEyHERAgxEUJMhBATIcRECDERQuyMYf2q0er/tWQUPrnpfolT3peVEGIihJgIISZCiIkQYiKEmAghJkKIvQ0PNI8+tHzJwe+PX8ak/V8Az6yHlyNCiIkQYiKEmAghJkKIiRBiIoTY9LAe+AsrIcRECDERQkyEEBMhxEQIMRFCTIQQEyHERAgxEUJMhBATIcRECDERQkyEEBMhxEQIMRFCTIQQEyHERAgxEUJMhBATIcRECDERQkyEEBMhxEQIMRFCTIQQEyHERAgxEUJMhBATIcT+APdkbUQLCmuxAAAAAElFTkSuQmCC", "exception": null } }
また、これが正しいのであれば、Vueの記述の適切なものを教えていただきたいです。
環境
Laravel Framework 7.30.4
"php": "^7.2.5
あなたの回答
tips
プレビュー