How to export/save result?

[datvm]

Sorry maybe I am missing something but there is no documentation on any method to get the result to save to storage, like Canvas/SVG/PNG. Is this supported?

[denno020]

I don't know of an "official" way, but I've found a hacky way:

const base64doc = btoa(unescape(encodeURIComponent(document.getElementById('qr1').shadowRoot.querySelector('svg').outerHTML)));
const a = document.createElement('a');
const e = new MouseEvent('click');

a.download = 'download.svg';
a.href = 'data:text/html;base64,' + base64doc;
a.dispatchEvent(e);

Effectively, grab the qr-code instance, jump into its shadow root to then find the SVG that is rendering the image. From there, it's really up to you how you want to trigger a download of a file. I've included one such way. Not sure if it's the best way, but it's a way that works 😅

[travisvn]

I'm using React / Next.js, and I ended up having some luck with using html-to-image

npm i html-to-image

  const qrCodeRef = useRef<HTMLElement>(null)

  const onButtonClick = useCallback(async () => {
    if (qrCodeRef.current === null) {
      return
    }

    toSvg(qrCodeRef.current, { cacheBust: true, })
      .then((dataUrl) => {
        const link = document.createElement('a')
        link.download = 'qrcode.svg'
        link.href = dataUrl
        link.click()
      })
      .catch((err) => {
        console.log(err)
      })
  }, [qrCodeRef])

And

<button onClick={onButtonClick}>Download</button>

However, I'm not totally happy with the end result and am considering other QR code generation options at this point. But hopefully this might help someone else who stumbles upon this in the future.