如何使用qrcode.js将url生成二维码后并转换成图片保存到本地？ |
您所在的位置：网站首页 › 如何把链接转成二维码图片 › 如何使用qrcode.js将url生成二维码后并转换成图片保存到本地？ |
|
1.首先导入qrcode.js组件，并引用它。这一步的方法就不细说了，两种方法，cdn和npm下载。 我看有很多帖子是在页面上生成一个二维码，然后再保存下载。但是有时候有些需求是在表格中点击下载就直接将二维码保存本地了。其实这里都一样无非就是一个展示一个不展示罢了。
2.生成二维码 1 tip(url, fileName) { 2 var div = document.createElement('div'); 3 var code = new qrcode(div, { 4 text: url, 5 width: 500, 6 height: 500, 7 colorDark: "#000000", 8 colorLight: "#ffffff", 9 correctLevel: qrcode.CorrectLevel.H 10 }) 11 //这里如果需要在页面上展示的话，就将div节点给添加到dom树上去；node.appendChild(div)12 let canvas = code._el.querySelector("canvas");//获取生成二维码中的canvas，并将canvas转换成base64 13 var base64Text = canvas.toDataURL("image/png"); 14 var blob = getBlob(base64Text); //将base64转换成blob对象 //接下来就是下载了，主要的思路就是通过URL.createURL()方法把blob对象转换成url，然后绑定到a标签中的href上，通过a标签的下载属性来进行下载。 15 if (navigator.msSaveBlob) { 16 // IE的Blob保存方法 17 navigator.msSaveBlob(blob, fileName); 18 } else { 19 var link = document.createElement('a'); 20 var href = window.URL.createObjectURL(blob); 21 link.href = href; 22 link.download = fileName; //a标签的下载属性 23 document.body.appendChild(link); // firefox需要把a添加到dom才能正确执行click 24 link.click(); 25 // 延时保证下载成功执行，否则可能下载未找到文件的问题 26 setTimeout(function () { 27 window.URL.revokeObjectURL(href); // 释放Url对象 28 document.body.removeChild(link); 29 }, 100); 30 } 31 32 }, 33 getBlob(base64) { 34 var mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型 35 var byteString = atob(base64.split(',')[1]); //base64 解码 36 var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组 37 var intArray = new Uint8Array(arrayBuffer); //创建视图 38 for (var i = 0; i < byteString.length; i += 1) { 39 intArray[i] = byteString.charCodeAt(i); 40 } 41 return new Blob([intArray], { 42 type: mimeString 43 }); 44 },
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |