JS批量生成带文字二维码并打成压缩包

最新推荐文章于 2023-10-24 20:24:42 发布

原创

最新推荐文章于 2023-10-24 20:24:42 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

本文介绍了如何使用qrcode.js生成二维码，结合html2canvas.js绘制带有特殊样式的二维码，再利用jszip.js创建文件夹并打包成压缩文件，最后通过FileSaver进行下载。详细步骤包括：qrcode.js的使用，html2canvas.js将二维码样式化，以及jsZip库的简单应用。

一、qrcode.js生成二维码

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

var qrcode = new QRCode("test", {
   
   
    text: "http://jindo.dev.naver.com/collie",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

参考：
qrcode官网

二、html2canvas.js绘制特殊样式二维码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <body style="margin:0px">
    <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
      <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
    </div>
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
   
   
        html2canvas(document.body).then(canvas => {
   
   
          document.body.appendChild(canvas)
        });
      }
    </script>
  </body>
</html>