Anchor tag with download prop skips contents after # character

[rostamiani]

I'm using an anchor tag to export my data to a csv file:

  <a href="data:text;charset=utf-8,1,2,3,4,5" download="myfile.csv">Download</a>

But sometimes there is a # character in the data that and the file after this character is not exporting!
Example:

<a href="data:text;charset=utf-8,Start # This will be skipped" download="myfile.csv">Download</a>

You can see this bug here:
https://jsfiddle.net/rostamiani/xswar3fj/2/

I'm using Firefox 93.0 on Ubuntu 21.10

[andreubotella]

This is not a bug. The processing of data: URLs is specified by the fetch spec (https://fetch.spec.whatwg.org/#data-urls), and # in URL syntax is a fragment marker. URL fragments are not sent to the server, or used in fetching at all, so it makes sense that they're also skipped when decoding data: URLs.

If you want to use arbitrary characters in data: URLs, you have to percent-encode them (for example, with encodeURIComponent(data) in Javascript).

[annevk]

I suppose it might be worth ensuring this is tested (although we don't have a download API at the moment).

cc @jgraham