jquery-qrcode js生成二维码，完美解决 json

最新推荐文章于 2025-06-21 10:56:22 发布

原创最新推荐文章于 2025-06-21 10:56:22 发布 · 1.2w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#二维码 #解决方案 #json

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在前端使用jquery-qrcode.js库生成包含复杂JSON数据的二维码的解决方案。遇到中文乱码问题时，直接使用官网提供的最新版js文件即可解决，无需额外处理。官方提供多个示例，帮助开发者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中需要使用在前端通过js的方式生成一个二维码，二维码内容为后台传过来的json数据，数据中包含了中英文，引号等信息，直接使用github中的jquery-qrcode.js发现生成的二维码根本无法扫描出来，一看最后更新时间为4年前。最后遍寻解决方案无果，只好请教google。

解决方案很简单，使用官网的js就ok，中文乱码问题也无需转码，直接迎刃而解。
官网地址
https://larsjung.de/jquery-qrcode/



Options

The available options and their default values are:

{
    // render method: 'canvas', 'image' or 'div'
    render: 'canvas',
    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 200,

    // code color or image element
    fill: '#000',

    // background color or image element, null for transparent background
    background: null,

    // content
    text: 'no text',

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 0,

    // modes
    // 0: normal
    // 1: label strip
    // 2: label box
    // 3: image strip
    // 4: image box
    mode: 0,

    mSize: 0.1,
    mPosX: 0.5,
    mPosY: 0.5,

    label: 'no label',
    fontname: 'sans',
    fontcolor: '#000',

    image: null
}

Examples

Default values

Doesn’t make much sense, since it encodes the text: ‘no text’

$(selector).qrcode();

Customized

Some values changed

$(selector).qrcode({
    "size": 100,
    "color": "#3a3",
    "text": "http://larsjung.de/qrcode"
});

Same as above but rendered as div. The size of QR code might be slightly smaller than the desired size to make it pixel perfect. In this case it will be centered inside a container element with the desired sizes.

$(selector).qrcode({
    "render": "div",
    "size": 100,
    "color": "#3a3",
    "text": "http://larsjung.de/qrcode"
});

附官方demo

https://release.larsjung.de/jquery-qrcode/jquery-qrcode-0.12.0.zip