質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

0回答

580閲覧

Laravel + Nuxt.jsでQRコードダウンロード機能を実装したい

masaosan18

総合スコア65

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2021/05/26 16:04

やりたいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問