主题

二维码的生成方式、样式多样,如草料二维码,但在程序中，生成往往需要保证美观的同时附加一些文字说明,至于批量，往往需要结合压缩包进行处理,今天聊聊相对比较美观的二维码组件及二次加工文字结合压缩下载的处理过程。

经过

相信处理过二维码生成的基本都用过qrcode,但奈何生成的二维码略显死板,跟电视屏幕花屏一样，不够灵动，今天介绍 ”qrcodejs“

npm i -g qrcodejs

如果临时需要帮别人生成指定内容的二维码，可以用命令直接生成相关二维码

qrcode -d F00 -o out.png -w 600  "some text"

• 颜色、大小、前景色、背景色等都可以进行设置,这里不过多介绍,如果你还没试用过，开启你的探索之旅吧。
• 如果用过，接着往下看,主要对qrcode产生的二维码图片叠加相关内容描述后,进行处理，当然内容可以更丰富,如果你要处理表格加二维码那种形式,这种方式的特点就是线上打印不会”糊“,不用兼容打印样式,麻烦点儿就是实现canvas表格绘制，一般二维码简单信息的输出支持起来是可行的。 代码中相关的批量封装 主体的逻辑代码如下

import QRCode from 'qrcode'
import JSZip from 'jszip';
import FileSaver from 'file-saver';


const generateQR = async (text, options) => {
    try {
        const _canvas = document.createElement('canvas');
        options  ={title: '',  width: 450, color: '#00F',...options } //margin: 20,

    //   const   daturl= await QRCode.toDataURL(text, options);
    //   return daturl;
        const res = await QRCode.toCanvas(_canvas, text, options);
        const ctx = _canvas.getContext('2d');
        if (!ctx) return;
        /**
         * 绘制相关需要添加的标题信息
         * 针对
         */
         ctx.font="25px 微软雅黑"//和css中的font一样，不过没有了行高
         ctx.textAlign="center"//和css中的text-align一样
         ctx.fillText(options.title,225,430);
        const basurl= ctx.canvas.toDataURL("image/jpeg",1);
        return basurl;
    } catch (err) {
        console.error(err)
    }
}


function getTime() {
    let data = new Date();
    return data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate();
}
const exportJSZip = async (zipName, handle) => {
    var zip = new JSZip();
    let myNotesName = zipName;
    if (handle) {
        await handle(zip);
    }
    // 下载
    const content = await zip.generateAsync({ type: "blob" });
     FileSaver.saveAs(content, `${myNotesName}${getTime()}.zip`);
      
}


export const exportQRCodeJSZip= async (zipName,arryList)=>{
   const handle= async (zip)=>{
    for (let index = 0; index < arryList.length; index++) {
        const element = arryList[index];
        const dataUrl= await generateQR(element.text,{title:element.title});
        dataUrl=dataUrl.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")
        await zip.file(`${element.title}.jpg`, dataUrl, {base64: true});
    } 
     }
     exportJSZip(zipName,handle);
}

• 调用时算是无意搞除了个算是bug，但更像是增强支持的东西，如果title用/则可以在压缩时当成压缩文件夹使用,后面的可以当作名称,也算是bug变功能的典范了，先大笑三声...

   await exportQRCodeJSZip("二维码", data.map(x => {
          var text = JSON.stringify(x);
          //此处用/可以当成是文件夹，
          return { title: `${x.warehouseName}/${x.reservoirName}-${x.name}`, text: text }
        }));

• 至于压缩包和下载,大家基本上都用的比较频繁，此处只是提供一个二维码二次加工的思路,简单记录,代码仓促,勉强一观吧

吐槽环节

啊，最近又忙的浑天暗地的,很多想法和换新环境的初衷算是不停的碰撞，算是站在不同的角度看开发岗的特质和弊病，身在其中收获满满吧，希望后续能有一篇良性分享，总结一下自身的不足，提炼一下特质吧，另外抱怨一句，不知道是年龄不饶人还是咋的，最近感觉做事儿的时候依然精神饱满,一到周五放松就拉跨，希望是懒惰病发吧。