0

Acrescentar data/hora na saída do arquivo "html2canvas". O Html esta ok, só ñ consigo q o nome do arquivo tenha data/hora. Tipo: image_datahora.jpg

$('#call').click(function(){
  html2canvas($('#lista'), 
  {
    onrendered: function (canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'image.jpg';
      a.click();
    }
  });
});
#lista{
   margin:10% 40%;
}
.button{
   padding:10px;
   font-size:20px;
   margin:0 20px;
}
#test{
   background:#3399cc;
   padding:50px;
}
.x2{
   transform: scale(2,2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="lista">
    <h1 id="test">imagem</h1>
</div>
     
<center>
    <button id="call" class="button">Download jpg</button>
</center>

1 Resposta 1

1

Você pode utilizar a classe Date e seus métodos para formar uma data e hora no formato que desejar:

const data = new Date();

console.log("Objeto Date:", data);
console.log("Ano:", data.getFullYear());
console.log("Mês:", data.getMonth() + 1 ); //O mês começa em zero
console.log("Dia:", data.getDate());
console.log("Hora:", data.getHours());
console.log("Minutos:", data.getMinutes());
console.log("Segundos:", data.getSeconds());


Veja um exemplo, montando a data no seguinte formato: ano + mês + dia + hora + minutos + segundos.

Sendo que utilizei template string para montar o nome do arquivo:

//Exemplo de função para os números sempre terem dos dígitos, mantendo um zero a esquerda quando for abaixo de dez
function zeroEsquerda(value) {
  return ("00" + value).slice(-2);
}

$('#call').click(function(){
  html2canvas($('#lista'), {
    onrendered: function (canvas) {
      const a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");

      const data = new Date();

      a.download = `image_${data.getFullYear()}${zeroEsquerda(data.getMonth()+1)}${zeroEsquerda(data.getDate())}${zeroEsquerda(data.getHours())}${zeroEsquerda(data.getMinutes())}${zeroEsquerda(data.getSeconds())}.jpg`;
      a.click();
    }
  });
});
#lista{
   margin:10% 40%;
}

.button{
   padding:10px;
   font-size:20px;
   margin:0 20px;
}

#test{
   background:#3399cc;
   padding:50px;
}

.x2{
   transform: scale(2,2);
}
<div id="lista">
  <h1 id="test">imagem</h1>
</div>

<center>
  <button id="call" class="button">Download jpg</button>
</center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

</script>

Para saber mais sobre formatação de data em javascript, sugiro dar uma olhada nessa pergunta

Obs: Você utilizou a tag center em seu exemplo, não modifiquei a mesma, mas é importante que saiba que essa tag encontra-se obsoleta.


Documentações:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/center

8

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 .