Opening egg: Click here 😋

Use qrcode.js to generate two-dimensional code in the front end, and download

First, introduce JS package

<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
1
Copy the code

Second, HTML code

<div id="qrcode"></div>
1
Copy the code

Third, generate two-dimensional code

Var QRCode: any; declare var QRCode: any; Function makeQRCode(qrCodeContent){var qrcode = new qrcode ("test", {text: qrCodeContent, // 128, colorDark: "#000000", // code color: "# FFFFFF ", // code background color correctLevel: qrcode.correctlevel.h // height correctlevel.h); // qrcode.clear(); // qrcode.makecode (" the contents of the qrcode "); // Generate another qr code}Copy the code

Four, the use of hyperlinks to download two-dimensional code (do not support cross-domain)

function downloadQRCode() { const qrCodeDiv: any = document.getElementById('qrcode'); Const url = qrcodediv.querySelector ('canvas').todataurl ('image/ PNG '); Const a = document.createElement('a'); // Create a document const Handle = new MouseEvent('click') // simulate the mouse click event a.donLoad = this.qrcodename Set the download attribute value of node A to A.href = url; // Assign the image SRC to the href a.dispatchEvent(handle) of node ACopy the code

So the front end generates a TWO-DIMENSIONAL code. If you can help 👍+ attention, we learn front-end ~~~

Other methods to generate two-dimensional code: 1, front-end generation two-dimensional code (with forage) 2, front-end generation two-dimensional code @techiediaries/ NGX-qrcode