js 创建二维码点击事件下载图片（或者二维码）

最新推荐文章于 2024-07-29 10:49:00 发布

奥皮

最新推荐文章于 2024-07-29 10:49:00 发布

阅读量757

点赞数

分类专栏： vue js 文章标签：点击下载图片

本文链接：https://blog.csdn.net/axIsMyName/article/details/101210377

版权

js 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

通过原始js下载图片在点击事件里面代码如下

<body>
    <div id="app">
        <div id="qrcode"></div>
        <button @click="a">diandianwo</button>
    </div>
</body>
<!-- 先引入 Vue -->

<script src="./qrcode.min.js"></script>//引入插件
<script src="https://unpkg.com/vue/dist/vue.js">

</script>
<script>
    new Vue({
        el: '#app',
        data: {},
        mounted: function () {
            this.makeCode()
        },
        methods: {
            makeCode: function () {
                new QRCode(document.getElementById("qrcode"), "http://www.runoob.com")//创建二维码
            },
            a: function () {
                let div = document.getElementById("qrcode") //获取id
                let pic = div.querySelector("img")//获取img图片
                let a = document.createElement("a")
                //设置a标签的href属性（将canvas变成png图片）
                a.href = pic.getAttribute('src')//获取二维码的路径
                //设置下载文件的名字
                a.download = "二维码.png"
                //点击
                a.click()
            }
        }
    })
</script>