vue js前端根据所需参数生成二维码并下载

需要一个插件 qrcodejs2，使用 npm install qrcodejs2 --save 下载该依赖包。
在vue中引入(我这边是vue2)。import QRCode from 'qrcodejs2';
在计算属性中使用它。

 computed: {QRCode,},

在dom结构中设置一个容器来承载它，并设置一个id.

   <div id="qrcode" style="display: none"></div>  // 如果要显示这个二维码就不要设置display:none

然后可以在需要下载生成二维码的地方触发这个事件

生成二维码。

 qrcode(val) {  // 生成二维码函数document.getElementById('qrcode').innerHTML = '';  // 清空dom元素内容，防止污染canvas const qrcode = new QRCode('qrcode', {width: 200,height: 200, // 高度text: 'http://wx.qlogo.cn/mmhead/Q3auHgzCEVqspSUMou272WfP9OAJ1dNl0zr6uQ/0xxx', // 二维码内容  这个自己跟换地址 内容// render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）background: '#f0f', // 背景色foreground: '#ff0', // 前景色});console.log(qrcode, 'qrcode');this.saveImg(); // 下载函数return qrcode;// console.log(qrcode, '444444');},

生成二维码后就调用下载(如果你们只需要生成二维码就不需要这步)

   saveImg() {// 找到canvas标签const cvs = document.getElementById('qrcode').getElementsByTagName('canvas');console.log(cvs, '[[');// 创建一个a标签节点const a = document.createElement('a');// 设置a标签的href属性（将canvas变成png图片）a.href = cvs[0].toDataURL('image/png').replace('image/png', 'image/octet-stream');// 设置下载文件的名字a.download = 'qrcode.png';// 点击a.click();},

到此就完成了前端根据参数生成二维码，并下载。

项目需求使用element 表格来动态生成二维码，要求鼠标移入时显示二维码。
注意这里code 函数是放在 methods 里面的，不要试图使用计算属性来触发，有可能会重复渲染二维码。

截出部分项目中代码

         <template v-if="item.prop === 'linkCodeUrl'" #default="{ $index }"><p class="p" @click="copy(data[$index])">复制链接</p><el-popover popper-class="cloud-qrcode" placement="right" width="200" trigger="hover"><div :id="`qrcode${$index}`"></div><spanslot="reference"class="p"@click="downloadCode(data[$index], $index)"@mouseover="code(data[$index].id, $index)">下载二维码</span></el-popover></template>

js部分

    code(val, index) {console.log(index, 'pindex');this.$nextTick(() => {document.getElementById(`qrcode${index}`).innerHTML = '';const url = xxxxxx?id=${val}`;const qrcode = new QRCode(`qrcode${index}`, {width: 200,height: 200,text: url,background: '#f0f',foreground: '#ff0',});return qrcode;});},

效果图：

vue js前端根据所需参数生成二维码并下载相关推荐

vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴
近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接.列表每项都有二维码.下载二维码和复制链接和列表上方总的二维码. 老模块是用的qrocode中文文档,qrcode github ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
jquery二维码生成插件jquery.qrcode.js，生成二维码并下载
下载插件: 在GitHub上,下载qrcode二维码插件: https://github.com/jeromeetienne/jquery-qrcode Vue项目可直接通过node.js安装:npm ...
在前端页面生成二维码并下载（兼容IE）
做项目的过程中遇到一个需求:把每个果树都生成一个对应的二维码,然后点击下载. 大致的思路是:用canvas画出二维码,然后把二维码转换成base64图片,然后点击下载--(这个过程中IE的兼容有点儿折 ...
js 生成二维码并下载
1.先利用 qrcode 生成二维码引入qrcode.js ,地址为 qrcodejs-04f46c6.zip 点击打开链接页面: <button onclick="createQ ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...
vue 生成二维码并下载
vue 项目中需要实现生成二维码,并且下载下来. 引入 qrcode : import QRCode from "qrcodejs2" 生成二维码: createQRCode () ...
Vue使用QrcodeVue生成二维码并下载
生成二维码 1.安装qrcode.vue组件 npm install --save qrcode.vue 2.实现 <template><div id="app" ...
用qrcode.js写的生成二维码和下载这个二维码
实在是不想用网上的生成二维码,就自己写了个简单的生成和下载的功能先看一下效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

vue js前端根据所需参数生成二维码并下载

vue js前端根据所需参数生成二维码并下载相关推荐

最新文章

热门文章