vue前端生成二维码并下载

关于二维码新手小白的一些理解:

二维码生成方法很多,在此仅记录下最近用到的一种方法。

二维码其实是一个url,后端将二维码url生成并返给前端,前端采用一些方法将该二维码url生成二维码图片,并下载。二维码发布到朋友圈,有人扫描二维码,跳转到二维码详情页面。

通俗来说,二维码url其实是用户扫描二维码url后所看到页面所对应接口名。二维码url是这样的形式:http://localhost:8080/xxxx/yyyy?id=555&name=666,其中?前部分为扫描出来的页面所对应的接口,?后面为页面携带的参数,以&分隔,这里参数分别为id=555、name=666。

<template>

        <div id = "qrcode" ref = "qrcode"></div>

</template>

<script>

        import QRCode from 'qrcodejs2'

        ......

        methods: {

                createQRImage(){

                        this.$nextTick(()=>{

                                new QRCode(this.$refs['qrcode'],{

                                        text:"https://m.baidu.com/",

                                        width:200,

                                        height:200

                                })

                        }

                        )}

                 },

                downloadImage(){

                        let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');

                        let a = document.createElement('a');

                        a.href = myCanvas[0].toDataURL('image/URL');

                        a.download = "二维码";

                        a.click();

                }

        }

</script>

text里放获取到的二维码url。

若扫描出来的详情页面需要和后端交互的数据渲染,那么在扫描二维码的同时,前端可以使用一些方法获取二维码url中的参数,随后将这些参数post给后端,然后接受后端传递的参数,随后渲染页面。

猜你喜欢

转载自blog.csdn.net/qq_44918501/article/details/132477461