8

Eu queria criar um link pra um dowload no meu HTML, mas não queria guardar este conteúdo em um arquivo separado, mas no próprio html.

Em imagens tem como fazer algo assim

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

Será que para links também é possível?

3
  • Você está querendo converter um aquivo para base64 e enviar ele junto ao HTML? Assim ao clicar no link o usuário irá baixar esse arquivo? Se for não aconselho, pois seu HTML irá ficar pesado e irá demorar muito para carregar, sem saber se a pessoa quer ou não baixar o arquivo.
    – lionbtt
    Commented 5/02/2014 às 12:10
  • Isso, mas não estou preocupado com o tamanho do arquivo, ele é pequeno
    – Jader Dias
    Commented 5/02/2014 às 12:14
  • Lembrando, pra quem for aplicar as soluções abaixo, de setar um Content-Security-Policy adequado, permitindo data:text/html (ou outro mime mais adequado) no default-src
    – Largato
    Commented 21/08/2023 às 17:29

3 Respostas 3

12

Você pode utilizar o MIME-type data:text/html

Renderizar o código HTML quando clicar no link:

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

Exemplo no JSFiddle


HTML5

No HTML5 a tag <a>ganhou um recurso de download.

Fazer download do código HTML quando clicar no link:

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

Exemplo no JSFiddle

Seria isso o que você quer?

Mais informações sobre DATA URI aqui.
Sobre o recurso do download na tag <a> vi aqui.



Nota: Na maioria dos navegadores o data: é considerado uma origem separada, então em alguns contextos é necessário setar um Content-Security-Policy que permita data:text/html (ou outro mime mais adequado) como fonte confiável no default-src, para que não haja bloqueio do conteúdo.

1
  • +1 Muito massa essa resposta. :) Commented 5/02/2014 às 12:56
3

Basta fazer isso:

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

Você pode usar um atributo do HTML5: download="pagina.html"

Exemplo:

<a download="pagina.html" href="data:text/html;charset=utf-8,<html><body><h1>conteúdo/h1></body></html>">Clique aqui</a>
  1. http://www.w3.org/TR/html/links.html#downloading-resources
  2. https://stackoverflow.com/questions/6468517/force-download-of-datatext-plain-url/20282249#20282249

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .