1.安装qrcodejs2

cnpm i qrcodejs2 --save

或者

npm i qrcodejs2 --save

2.在需要用的页面中引入

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

3.methods 方法中使用

qrcode () {let qrcode = new QRCode("qrcode", {width: 200, // 二维码宽度，单位像素height: 200, // 二维码高度，单位像素text: "https://www.baidu.com/" // 生成二维码的链接});},

4. 如果你想把生成的二维码下载到本地可以使用html2canvas插件

npm install --save html2canvas

然后再所需页面中引入

import html2canvas from "html2canvas"

页面中

 <div ref="imageWrapper" style="width: 300px;height: 250px"><div id="qrcode" ref="qrcode" ></div></div>

methods方法中使用

  dataURLtoBlob(baseurl) {const arr = baseurl.split(',')const mime = arr[0].match(/:(.*?);/)[1]const bstr = atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], {type: mime})},// 下载二维码Download(){// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.imageWrapper, {backgroundColor: null}).then((canvas) => {const dataURL = canvas.toDataURL('image/png')var ss = this.dataURLtoBlob(dataURL)console.log(ss)const content = ss // 后台返回二进制数据const blob = new Blob([content])const fileName = '二维码.png'if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)} else { // IE10+下载navigator.msSaveBlob(blob, fileName)}})},

Vue 链接生成二维码相关推荐

vue链接生成二维码
下载 cnpm i qrcodejs2 --save 引用 import QRCode from "qrcodejs2"; 页面用法 <div id="qrcode ...
链接生成二维码( QRCode )
Vue中链接生成二维码安装插件 sudo npm install qrcodejs2 --save 页面中引入 import QRCode from "qrcodejs2"; c ...
js实现将链接生成二维码，并对生成的二维码转换为图片，右击可保存至本地
在vue项目中,实现将链接生成二维码:可识别跳转,将生成的二维码可转换成图片,并可保存至本地.具体操作步骤如下: 1.安装及引用首先,实现这个功能需要使用QRCode和html2canvas,所以在 ...
dom 生成图片和链接生成二维码
1. dom 生成图片此处使用的是 html2canvas 插件和canvas2image插件 html2canvas 方法的第二个入参还有很多选项可以配置,详情请看这里这里 html 1 < ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
java 根据指定链接生成二维码
需求: 就是需要把一个报告网址链接生成二维码,然后渲染在报告中,扫描二维码的时候能访问到这个报告,效果就达到了 1.首先提前需要添加的maven依赖 <!-- https://mvnreposi ...
iOS常用功能 - 根据链接生成二维码图片
根据链接生成二维码 1 -(void)generatingTwoDimensionalCode { 2 3 // 创建过滤器 4 CIFilter *filter = [CIFilter filter ...

Vue 链接生成二维码

1.安装qrcodejs2

2.在需要用的页面中引入

3.methods 方法中使用

4. 如果你想把生成的二维码下载到本地可以使用html2canvas插件

Vue 链接生成二维码相关推荐

最新文章

热门文章

Vue 链接生成二维码

1.安装qrcodejs2

2.在需要用的页面中引入

3.methods 方法中使用

4. 如果你想把 生成的二维码下载到本地可以使用html2canvas插件

Vue 链接生成二维码相关推荐

最新文章

热门文章

4. 如果你想把生成的二维码下载到本地可以使用html2canvas插件