Download only work with svg

[Etheonor]

Hello!

I have an issue with the download feature. It works only if I chose svg as downloadUrlFileFormat. Anything else will give me a "data:," when I console.log the event.detail.url on downloadUrlGenerated.

Did I miss something?

Thank you for this amazing plugin btw!

[x032205]

Hey, I tried recreating your issue but failed. Are you sure you're using the latest library version?

I'm using Svelte 5.

[Etheonor]

Ok I think I found the issue. I used the "isResponsive" property. If I turned it off, it's working. I'll resize the qr code without this one!

[x032205]

Wow that's a bit weird, because I was able to have it work with that property on.

[Castlenine]

I cannot reproduce this bug; it also works on my side.

I added a "test" here and it works.

[Etheonor]

This only works because on the same page you already have another QRCode that will generate the PNG.

If you create a svelte component with only your test and add downloadUrlFileFormat="png" ans isResponsive, it will not work...

I just tested it on my side and your component work until I delete this :

<p>With download url generated for PNG</p>
<div>
	<QRCode
		data="https://duxreserve.com"
		logoPath="/logo/lightning.svg"
		dispatchDownloadUrl
		downloadUrlFileFormat="png"
		on:downloadUrlGenerated={(event) => handleDownloadUrlGeneratedPng(event.detail.url)} />
</div>

{#if downloadUrlPng}
	<a href={downloadUrlPng} download="QR-code-filename-png" target="_blank"
		>Download QR Code in png format</a>
{/if}

[Castlenine]

Interesting. Let me check if I can debug it.

[Etheonor]

Take your time, now that I understand the issue, the workaround is create another QRCode with the png format and hide it 😁

[Castlenine]

Weird. Could you share your whole code?

[Castlenine]

FYI: Downloads don't work in Svelte REPL

[Etheonor]

I published a test project on https://github.com/etheonor/test-qrcode

in src/routes/test you have a simple page with two qr code, one with a isResponsive tag and the other without.

If you load the page with both QR code, the download link will work for both of them, but if you delete the second one, the first QR code (with isResponsive) will not have any data to dl.

On the first QR code, if you add

on:qrCodeGenerated={(event) => {
			console.log(event.detail);
		}}

You'll see that you don't have any data if you have the isResponsive property, but remove it and you'll have a generated image

[Castlenine]

I will look at it during the weekend. Thank you for your patience and feedback