以編程方式下載 QR 圖像

Question

我嘗試使用 QRcode.js 庫創建二維碼。 從用戶界面開始，我可以手動點擊下載按鈕來下載它，但我會在不點擊按鈕的情況下自動下載。

基於我的代碼波紋管。

function genQR(link_string){
    let qr_code_element = document.querySelector(".qr-code");

      if (link_string != "") {
          if (qr_code_element.childElementCount == 0) {
            generate(qr_code_element, link_string);
          } else {
          qr_code_element.innerHTML = "";
            generate(qr_code_element, link_string);
          }
      } else {
          alert("not valid QR input");
          qr_code_element.style = "display: none";
      }
  }

  function generate(qr_code_element, link_string) {
    qr_code_element.style = "";
    var qrcode = new QRCode(qr_code_element, {
        text: link_string,
        width: 200, 
        height: 200,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    let download = document.createElement("button");
    // qr_code_element.appendChild(download);

    let download_link = document.createElement("a");
    download_link.setAttribute("download", "qr.png");
    download_link.setAttribute("id", "downloadbtn");
    download_link.innerText = "Download";
    // download.appendChild(download_link);

    let qr_code_img = document.querySelector(".qr-code img");
    let qr_code_canvas = document.querySelector("canvas");

    if (qr_code_img.getAttribute("src") == null) {
      setTimeout(() => {
        download_link.setAttribute("href", `${qr_code_canvas.toDataURL()}`);
      }, 300);
    } else {
        setTimeout(() => {
        download_link.setAttribute("href", `${qr_code_img.getAttribute("src")}`);
        }, 300);
    }

    var clickEvent = new MouseEvent("click", {
      "view": window,
      "bubbles": true,
      "cancelable": false
  });
  
  //I expect the below line will automatically download the QR but nothing fires.
  download_link.dispatchEvent(clickEvent);
}

如果我使用按鈕單擊並手動下載對我來說效果很好，但我想減少太多步驟。

我想我幾乎在這里完成但失敗了。

誰能告訴我如何自動下載？

先感謝您。

Answer 1

我過去遇到過這個問題，我通過創建一個小的 util function 解決了這個問題，我可以在按下按鈕時調用它。 但是直接在 function 末尾調用它應該與用戶單擊具有相同的結果，有效地自動下載 QR 碼而無需用戶輸入。

export function download(blob, filename) {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = filename
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  window.URL.revokeObjectURL(url);
}

我猜你可以嘗試將generate作為第一個參數傳遞，如果你得到的 object 是一個 Blob。 否則，您可能需要先轉換它。

Answer 2

我通過在我的代碼底部添加您共享的源代碼來完成我的目標，然后添加此 function 以將 dataURL 轉換為 Blob

function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

 var blob = new Blob([ab], {type: mimeString});
  return blob;

}

非常感謝@Gianmarco Rengucci 我為你評分