How to export/save result? #4

Activity

1. denno020 commented on Jan 22, 2024

   

   denno020

   on Jan 22, 2024

   More actions

   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 😅

   👍React with 👍1Reacted by Nicolas D.
2. travisvn commented on Jul 18, 2024

   

   travisvn

   on Jul 18, 2024

   More actions

   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.

   👍React with 👍1Reacted by Ryan Chiang
3. ali2b commented on Oct 29, 2025

   

   ali2b

   on Oct 29, 2025

   Last edited by ali2b

   More actions

   var width = 200
   var height = 200
   const svgHtml = document.getElementById('qr1').shadowRoot.querySelector('svg').outerHTML;                   
   const svgBlob = new Blob([svgHtml], { type: 'image/svg+xml' });
   const svgObjectUrl = URL.createObjectURL(svgBlob);                    
   const img = new Image();
   img.onload = () => {
   	const canvas = document.createElement('canvas');
   	canvas.width = width;
   	canvas.height = height;
   	const ctx = canvas.getContext('2d');
   	ctx.drawImage(img, 0, 0, width, height);
   	URL.revokeObjectURL(svgObjectUrl); // Clean up the object URL                        
   	var base64Image = canvas.toDataURL('image/png');                        
   	const a = document.createElement('a');        
   	 a.download = '1.png'
   	a.href = base64Image;
   	a.click()
   };
   img.onerror = (error) => {
   	URL.revokeObjectURL(svgObjectUrl);
   	reject(error);
   };
   img.src = svgObjectUrl;