随笔弹窗二维码生成及图片下载

技术2022-07-11 98

一、qrcode-vue模块

该模块是用来动态生成二维码的vue模块插件， <qrcode-vue></qrcode-vue>的底层其实是一个<canvas></canvas>标签。要想使用qrcode.vue插件，需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev，在这里我举一个例子。 <el-col :span="6" class="item"> <div class="code">  <qrcode-vue :value='shareUrl' :size='qrCodeSize' className='qrcode' id="picture" ref="code"></qrcode-vue> </div> <p class="">班级二维码</p>  <el-button round size="small" @click="savePic">保存图片</el-button> </el-col>

二·、如何点击保存图片进行下载

点击"保存图片"按钮在methods中写如下点击事件对应方法：

//保存图片 savePic(){ //找到canvas标签 let myCanvas = document.getElementById(‘picture’).getElementsByTagName(‘canvas’); //创建一个a标签节点 let a = document.createElement(“a”) //设置a标签的href属性（将canvas变成png图片） a.href = myCanvas[0].toDataURL(‘image/png’).replace(‘image/png’, ‘image/octet-stream’) //设置下载文件的名字 a.download = “班级二维码” //点击 a.click() //弹出提示 this.$message({message:‘亲，正在进行下载保存’,type:‘warning’}) }, … 还有一些随笔,

这里是下载图片功能数组去重部分方法 ES6 let set = new Set( arr ) 给对象去重： var arr2 = arr.filter((x, index,self)=>{ var arrids = [ ] arr.forEach((item,i) => { arrids.push(item.id) }) return arrids.indexOf(x.id) === index }) console.log(arr2); 下载二维码插件几种方式

第一种: yarn add vue-qrcode-directive 第二种: yarn add vue-qr

在main.js引入 use 一下

import qrcode from "vue-qrcode-directive" import VueQr from 'vue-qr' //引入VueQr Vue.use(qrcode) Vue.use(VueQr)

第一种使用

<div v-qr="options" v-if="options" id="picture"></div> options: { text: `我是二维码的内容(I'm the content of the QR code.)'`, render: "canvas", width: 256, height: 256, typeNumber: -1, correctLevel: 2, background: "#ffffff", foreground: "#000000" }

第二种使用方法 (这种二维码插件可以加logo图片)

第一种方法下载二维码

//找到canvas标签 let myCanvas = document.getElementById('picture').getElementsByTagName('canvas'); //创建一个a标签节点 let a = document.createElement("a") //设置a标签的href属性（将canvas变成png图片） a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream') //设置下载文件的名字 a.download = this.codeName+'.png' //点击 a.click()

第二种方法下载二维码并重新绘制二维码写文字水印

// 保存二维码 downPic(rid,type) { //rid表示对应的二维码的id type表示画布的类型 let c = document.getElementById("box") //获取canvas画布画布大小和canvas大小一致 let ctx = c.getContext("2d"); c.height = 256;//清空画布，重新绘制 let div = null; //设置div变量 //判断类型：single div = document.getElementById("picture"); //获取到需要绘制到canvas的div即二维码div let img = div.getElementsByTagName("img")[0];//获取二维码 ctx.drawImage(img, 25, 25, 200, 200) //参数依次为：绘制图片，左，上，宽，高 ctx.font = "16px bold 微软雅黑" //设置字体大小这里文字的加粗一直无效，至今没搞清楚原因有能解决的朋友可以私聊 let textWidth = ctx.measureText(this.config).width //获取文字宽度 console.log('文字宽度',textWidth) let widths = (256 - textWidth)/2 //多画几次，让字体加粗解决文字无法加粗问题 for (let i = 0; i < 10; i++) { ctx.fillText(this.config, widths, 250) //使用偏移量加粗字体 } let dataUrl = c.toDataURL(); //获取返回的base64的信息 //如果类型是单张（single）则下载合成好的图片 if (type == 'single') { const link = document.createElement('a'); link.download = this.codeName; link.href = dataUrl; link.click(); // link.removeNode(true) //弹出提示 this.$message.warning('亲，正在进行下载保存二维码') } }

IE MicrosoftEdge 兼容下载问题

//文件地址 var url = '../aaa/bbb/模板.xlsx'; var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = "blob"; // 返回类型blob // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑 xhr.onload = function() { // 请求完成 if(this.status === 200) { // 返回200 var blob = this.response; var href = window.URL.createObjectURL(blob); //创建下载的链接 //判断是否是IE浏览器，是的话返回true if (window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(blob, '模板.xlsx') } catch (e) { console.log(e); } } else { // 谷歌浏览器创建a标签添加download属性下载 var downloadElement = document.createElement('a'); downloadElement.href = href; downloadElement.target = '_blank'; downloadElement.download = '模板.xlsx'; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 } } } // 发送ajax请求 xhr.send()

Processed: 0.010, SQL: 9

随笔 弹窗 二维码生成及图片下载

随笔弹窗二维码生成及图片下载