vue二维码生成且带文字图片下载

最新推荐文章于 2024-05-06 22:19:36 发布

LQ-刘强

最新推荐文章于 2024-05-06 22:19:36 发布

阅读量953

点赞数

分类专栏： web前端系列

本文链接：https://blog.csdn.net/qq_33429583/article/details/125844754

版权

web前端系列专栏收录该内容

26 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue项目中集成qrcode-vue和html2canvas库，实现自定义二维码生成，并结合按钮实现点击下载二维码图片的功能。步骤包括安装依赖库、在Vue组件中引入并配置，以及编写下载方法。

摘要由CSDN通过智能技术生成

（一）web页面效果：

（二）执行结果：

（三）vue代码实例：

1）安装qrcode-vue库：npm install --save qrcode-vue

2）安装html2canvas库：npm install --save html2canvas

3）vue代码

<template>
<div>
  <div class="div-box">
     <div ref="content" style="width:fit-content;height:fit-content;text-align: center;">
        <qrcode-vue
            :size="qrcodeVue.size"
            :value="qrcodeVue.value"
            :bgColor="qrcodeVue.bgColor"
            :fgColor="qrcodeVue.fgColor">
        </qrcode-vue>
         <p>描述文字...</p>
     </div>
  </div> 
  <el-button type="primary" icon="el-icon-document" size="small" @click="downloadCode">下载二维码文字图片</el-button>
</div>      
</template>

<script>

  import qrcodeVue from 'qrcode-vue'
  import html2canvas from 'html2canvas'

  export default {
    name: 'Test',
    components: { qrcodeVue },
    data () {
      return {
         qrcodeVue: {
          size: 150,
          bgColor: '#67C23A', //背景色
          fgColor: '#FFFFFF', //前景色
          value: 'qrCode value', //二维码值
          logo: require('@/assets/logo.png') //logo图片
        }
      }
    },
    created () {
      
    },
    mounted () {
       
    },
    methods: {
     downloadCode(){
				let content = this.$refs.content
				let scrollHeight = content.scrollHeight
				let scrollWidth = content.scrollWidth
				html2canvas(content,{
						scale: window.devicePixelRatio*2,
						useCORS: true , //开启跨域配置，但和allowTaint不能共存
						width:scrollWidth,
						height:scrollHeight,
						windowWidth:scrollWidth,
						windowHeight:scrollHeight,
						x:0,
						y:window.pageYOffset
					}).then((canvas) => {
						this.operType = 'edit'
						let dataURL = canvas.toDataURL("image/jpg");
						let link = document.createElement("a");    
						link.href = dataURL;
						let filename = `二维码文件名.jpg`;  //文件名称
						link.setAttribute("download", filename);
						link.style.display = "none"; //a标签隐藏
						document.body.appendChild(link);
						link.click();
					})
			}
    }
  }
</script>

<style>
.div-box {
    width:fit-content;
    height:fit-content;
    padding: 2px;
    border: 1px dashed #f69c55;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
}
</style>