zoukankan      html  css  js  c++  java
  • 如何使用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            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 },



  • 相关阅读:
    Golang的math包常用方法
    部署tomcat部署实战案例
    CentOS 7.6操作系统部署JDK实战案例
    Linux防火墙iptables命令管理入门
    Docker镜像-基于DockerFile制作编译版nginx镜像
    使用Docker快速部署Mysql服务器
    Docker镜像-基于DockerFile制作yum版nginx镜像
    Docker镜像-手动制作yum版nginx镜像
    Docker容器操作基础命令
    Docker镜像管理篇
  • 原文地址:https://www.cnblogs.com/Godfather-twq/p/13031908.html
Copyright © 2011-2022 走看看