vue 生成qrCode二维码保存图片至本地

2021年10月16日 160次阅读 来源: 写代码的小新宇嘿

如图：

《vue 生成qrCode二维码保存图片至本地》

 

首先 下载好qrcode.vue 

npm install qrcode -S

QRCode.js 是一个用于生成二维码的 JavaScript 库。

主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

go！

准备好一个button 我这里用的是antd-disign-vue 的button  加好点击事件 和 modal的开关

 <a-button type="primary" @click="showModalQrCode = true"> 生成二维码 </a-button>

接下来用到antd-design-vue里的modal 

<a-modal v-model:visible="showModalQrCode" :footer="null" :body-style="{ marginLeft: '17%' }" :centered="true" :width="270" :height="326">
   <template #title>
      <p style="text-align: center; margin-top: 8px; margin-bottom: 0">二维码链接</p>
   </template>
   <div class="qrCode">
      <qrcode-vue id="picture" :value="urls" :size="132" />
   </div>
   <a-button type="primary" style="margin-top: 30px; width: 132px" :block="true" @click="handleDownloadLocal">下载至本地</a-button>
</a-modal>
// 获取到url地址
const { origin } = window.location 
const { pathname } = window.location 
     // 生成二维码
     const handleDownloadLocal = () => {
     // 获取 token
     urls.value = `${origin + pathname}#/dataReport/${taskId}?token=1111`
     const myCanvas = document.getElementById('picture')
     const a = document.createElement('a')
     a.href = myCanvas.toDataURL('image/png')
     a.download = '分享二维码'
     a.click()
     message.success('正在下载 请稍后')
 }

vue3.0定义的const  记得return出去哦！

over。

《vue 生成qrCode二维码保存图片至本地》

    原文作者：写代码的小新宇嘿
    原文地址: https://blog.csdn.net/tendernessxy/article/details/119247195
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞