How to make a dowload inline file available in html?

Asked

Viewed 13,134 times

7

I wanted to create a link to a dowload in my HTML, but I didn’t want to save this content in a separate file, but in the html itself.

In images you can do something like this

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

Will for links is also possible?

  • Are you looking to convert a file to Base64 and send it to HTML? So by clicking on the link the user will download this file? If it is not advisable, because your HTML will get heavy and it will take a long time to load, not knowing if the person wants to download the file or not.

  • That, but I’m not worried about the file size, it’s small

3 answers

10


You can use MIME-type data:text/html

Render HTML code when you click the link:

<a href="data:text/html;charset=utf-8,<html><body><h1>pt.stackoverflow</h1></body></html>">Clique aqui</a>

Example in Jsfiddle


HTML5

In HTML5 the tag <a>won an appeal from download.

Download the HTML code when you click on the link:

<a href="data:text/html;charset=utf-8,<html><body><h1>pt.stackoverflow</h1></body></html>" download> Clique aqui </a>

Example in Jsfiddle

Would that be what you want?

More information about DATA URI here.
About the download feature in the tag <a> vi here.

  • this link is opening in the browser, there is no way to make it download a file?

  • HTML5 is possible. Updated!

  • +1 Too much mass this answer. :)

2

Just do this:

<img alt="Embedded Image" download="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

2

Browser other questions tagged

You are not signed in. Login or sign up in order to post.