web: download data to file

[wmte]

I have a situation where my web eframe/egui app has generated some image data. I have that data in a Vec<u8>.

I would like to offer a button to the user to save that data as a file locally. The image data may be up to around 8MiB.

I have tried using a data-uri, for example, this should 'link' the user to a 1x1 red pixel png file;

if ui.button("download").clicked() {
	ui.ctx().open_url(egui::OpenUrl {
		url: String::from("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC"),
		new_tab: true,
	});
}

If I paste the url above into a new tab, it works and displays the image (I would prefer a download dialogue, but this would be good enough). However when I click the button created by the code above, the new tab is an about:blank tab and no image is displayed.

• How can I get a data-uri working using egui in a web app?
• Is there a better approach for triggering a browser download to file from file bytes in memory?
• I have looked at rfd and would be happy to use it, but don't see anywhere to interact with file data, only paths.

Many thanks for any help or suggestions, and thanks to all contributors of egui for a great framework.

[wmte]

I have created a fairly awful solution;

		use web_sys;
		use wasm_bindgen::JsCast;

		let win = web_sys::window().unwrap();
		let doc = win.document().unwrap();

		let link = doc.create_element("a").unwrap();
		link.set_attribute("href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC");
		link.set_attribute("download", "output.png");

		let link: web_sys::HtmlAnchorElement = web_sys::HtmlAnchorElement::unchecked_from_js(link.into());
		link.click();

If there is interest in including this data-url-anchor style of supporting direct download of bytes to a file, I would be happy to create a PR with a tidy implementation as part of open_url.

[emilk]

Interesting! Having an easy way to download stuff would be a nice addition to egui and eframe.

The question is what such a command would do on native 🤔

[remysucre]

On native this could be “save as” or “export as”, but downloading really feels like a web exclusive thing