开始

用React生成二维码这里会用到一个npm包，叫做qrcode.react。首先我们先安装这个包
npm install --save qrcode.react
安装好了之后在我们的组件中引入import QRCode from 'qrcode.react'
这样我们就可以开心的使用二维码组件了，使用起来也非常方便，如下

<QRCode
    value="这是一个二维码" //value为二维码中包含的内容
    size={200} //二维码的宽高尺寸
    fgColor="#000000" //二维码的颜色
/>

完善

这样我们生成一个二维码啦，我们再往下做一些功能,例如说用户希望可以自己定制二维码的内容，并且下载二维码。那我们就先来一个输入框，这里用到了And Design

<div className="input">
    <Input ref="input" placeholder="请输入二维码的内容,扫码访问网址，请输入类似 https://baidu.com"/>
    <Button onClick={this.renderCode.bind(this)} className="button" type="primary">生成</Button>
</div>

然后让这个二维码变成一个受控组件

<QRCode
    value={this.state.value}
/>
renderCode() {
    let value = this.refs.input.input.value
    this.setState({
    value,
    hadCode: true
    })
}
//当hadCode为true时，render出二维码和下载按钮
{this.state.hadCode ? (
     <div className="code">
     <QRCode
          value={this.state.value}  //value参数为生成二维码的链接
          size={200} //二维码的宽高尺寸
          fgColor="#000000"//二维码的颜色
          id="code"
     />
     <div className="code-download"><Button onClick={this.downLoad.bind(this, 'code')} type="primary">下载</Button></div>
     </div>
    ) : ''}

下载

下载二维码的函数具体实现如下，主要是用到a标签和canvas的toDataUrl方法

    // 保存成png格式的图片
    downLoad(code) {
        setTimeout(() => {
            let canvas = document.getElementById(code)
            canvas = canvas.toDataURL("image/png");
            var oA = document.createElement("a");
            oA.download = '';// 设置下载的文件名，默认是'下载'
            oA.href = canvas;
            document.body.appendChild(oA);
            oA.click();
            oA.remove(); // 下载之后把创建的元素删除
        }, 0);
    }

这样就可以保存我们的二维码啦

下载json文件

这里顺便提一嘴，应该刚好做过这个，也在这个的下载部分里顺便写了

    downloadPie() {
        var oa= document.createElement('a');
        oa.download = "饼状图实例.json";
        // 字符内容转变成blob地址
        var bar = JSON.stringify({
            title: '柱形图', //图表的标题
            data: [
                { value: 1, name: 'Chrome' }, //value为所占比例 name为饼块名称
                { value: 2, name: 'Firefox' },
                { value: 3, name: 'Safari' },
                { value: 4, name: 'IE9+' },
                { value: 5, name: 'IE8-' }
            ]
        })
        var blob = new Blob([bar]);
        oa.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(oa);
        oa.click();
        // 然后移除
        document.body.removeChild(oa);
    }

这里主要用到一个Blog对象和一个全局方法URL.createObjectURL
MDN中如是描述Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

也就是可以把我们的JavaScript原生格式数据转换成一个文件

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

而配合使用URL.createObjectURL()可以生成一个我们的文件的路径，再通过a标签就可以下载到本地了