QRCode.jsを用いVUE二次元コード生成

1. QRコードを拡大してインストールします。

NPM QRコードをインストールします

2.アセンブリは、QRコードを拡大して導入され、

「QRコード」からインポートQRコード

3.htmlコード

< DIV > < スパンクラス= "右BTN" @click = "makeQRCode" >生成二维码</ スパン> </ divの> 

< divのクラス= "列ボディコンテンツのテキスト・センター" > 
    < divのクラス= "QRコード" > 
        < IMGのID = "イメージ" ：SRC = "QRコード" > 
        < P >扫码预览</ P > 
    </ DIV > 
</ DIV > 
<スタイルLANG =「スタイラス」スコープ> 
.RIGHT-BTN 
    位置相対
    表示インラインブロック
    マージン右：20ピクセルの
    パディング：2ピクセル計6Pxの
    行の高さ：20ピクセル
    フォントサイズ12ピクセルの
    色：#FFF 
    境界半径：4PX 
    背景色＃29eと
    カーソルポインタ
.column体-content 
    パディング：20ピクセル
    
    .qrコード
        位置に対して
        マージン右：20ピクセル
        のマージン底：10pxの
        表示インラインブロック
        
        IMGの
            幅：120ピクセル
            高さ120ピクセル
            の境界：1ピクセル固体#eee  
        P
            ライン高さ20ピクセル
            フォントサイズの12ピクセル
            テキストアラインセンター
</ スタイル>

前記QRコード：方法QRCode.toDataURL（二次元コード読取URL）を呼び出すには、必要な2次元コードを生成することができます

//は、二次元コード生成
makeQRCodeを（）{ 
    QRCode.toDataURL（「http://aaa.vv.com/erp/card?authkey="+ この .companyId）.then（imgData => {
         IF （imgData）{ 
            LETファイル = この.convertBase64UrlToBlob（imgData）;
             // サーバにアップロード（アリはクラウドにアップロードされ、this.ossは直接、呼び出すファイルをアップロードする方法を置くために、オブジェクトのプロパティとしてアリクラウドOSSのVueに接続されている）
            、これを。 oss.put（ 'QRコード' + Math.random（）* + 10 'の.png'、ファイル）.then（結果=> { 
                 この .qrcode = result.url; IMGのURLに割り当てられ//アップロードされた写真SRCの 
                 アラート（ '成功を生成します' ）
            }）
        } 
    }）。 
}、
//はファイルにBASE64から変換
convertBase64UrlToBlob（URLData）{ 
    LETバイトは = window.atob（urlData.split（ ''）[1]）; // URLヘッドを取り外し、バイトに変換
    //は、例外を処理する、ASCII変換コードは0未満が0より大きいある 
    LET AB＆= 新しい新しいArrayBuffer（bytes.length）; 
    せIA = 新しい新しいUint8Array（AB＆）;
     のための（; I <bytes.length I ++ LET I = 0 ）{ 
        IA [I]は =のバイト.charCodeAt（I）; 
    } 
    戻り 新しい新しいブロブ（[AB＆]、{タイプ： 'イメージ/ PNGを' }）; 
}

QRCode.jsを用いVUE二次元コード生成

おすすめ