如何在jQuery中爲qrcode創建下載鏈接？

我使用goqr.me api創建qrcode圖像。現在我想爲qrcode圖像創建一個下載鏈接。如何在jQuery中爲qrcode創建下載鏈接？

我創建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"/>'); 
}

我想有這樣的QR碼圖像的下載按鈕：

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

}

或者是有任何其它的跨瀏覽解決方案這個？

感謝您的幫助。

來源

2014-04-29 UsmanZ

只是創建一個標籤這就是href = dwnlUrl ?! – Alex

@亞歷，是的嘗試過。但它確實在同一個窗口中打開，而不是下載。 – UsmanZ

我得到了解決方案。 goqr.me api提供'下載'參數，我們需要在請求下傳圖片時將其值設爲'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);   
});

來源

2014-05-05 15:47:11 UsmanZ

Downloadify（https://github.com/dcneiner/Downloadify）可能會做你想做的。

另外，我發現添加下載=「FILENAME.EXT」你的標籤可以工作，但它是一個HTML5特性：

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

當然代FILENAME.EXT的東西，使更多的感。

希望這會有所幫助。

來源

2014-04-29 08:06:58 strikernl

感謝您的幫助。是的，但它需要一個跨瀏覽器的解決方案。正如你所說的它的HTML5，在IE中根本不起作用。 – UsmanZ

顯然你可以解決它，而不是在IE10以前的瀏覽器中工作，這可能有所幫助：http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/ – strikernl

如何在jQuery中爲qrcode創建下載鏈接？

回答

相關問題