如何在 jQuery 中为 qrcode 创建下载链接？答案

【问题标题】：How do I create a download link for qrcode in jQuery?如何在 jQuery 中为 qrcode 创建下载链接？
【发布时间】：2014-05-05 23:47:11
【问题描述】：

我正在使用goqr.me api 创建二维码图像。现在我想为二维码图片创建一个下载链接。

我正在以这种方式创建 qrcode 图像：

function generateQrcode(data) {
    var params = {
        data: data,
        size: '200x200',
        margin: 0
    };

    // populate the preview box with the generate qrcode
    var dwnldUrl = 'https://api.qrserver.com/v1/create-qr-code/?'+$.param(params);
    previewBox.html('<img src="'+dwnldUrl+'" alt="qrcode-image"/>');
}

我想要一个二维码图片的下载按钮，如下所示：

$('#qrcode-dwnld-btn').click(function() {
   // something to trigger download for the image ....    

}

或者有没有其他的跨浏览解决方案？

感谢您的帮助。

【问题讨论】：

只需创建一个标签，其 href = dwnlUrl?!
@Alex，是的，试过了。但它确实在同一个窗口中打开，而不是下载。

标签： jquery cross-browser download qr-code

【解决方案1】：

Downloadify (https://github.com/dcneiner/Downloadify) 可以做你想做的事。

另外，我发现将 download="filename.ext" 添加到您的标签可能有效，但它是 HTML5 功能：

<a href="url/to/your/qrcode" download="filename.ext"><img src="url/to/your/qrcode" /></a>

当然，用更有意义的东西替换 filename.ext。

希望这会有所帮助。

【讨论】：

感谢您的帮助。是的，它有效，但我想要一个跨浏览器的解决方案。正如你所说，它的 HTML5 在 IE 中根本不起作用。
显然你可以在IE10之前的浏览器中解决它，这可能会有所帮助：paxcel.net/blog/…

【解决方案2】：

我得到了解决方案。 goqr.me api 提供了 'download' 参数，我们需要在请求下载图片时将其值传递为 '1'。

然后，我们可以将窗口位置 href 设置为结果 url。

$('#qrcode-dwnld-btn').click(function() {
    var qrCodeBaseUri = 'https://api.qrserver.com/v1/create-qr-code/?',
        params = {
            data: data,
            size: '200x200',
            margin: 0,
            // more configuration parameters ...
            download: 1
        };

    window.location.href = qrCodeBaseUri + $.param(params);        
});

【讨论】：