1

Encontré este código que me funciona perfecto para guardar como .txt los datos de un Input en HTML, sin embargo no me funciona para poder exportar los datos dentro de un <DIV>. Pues al abrir el archivo exportado sale "undefined".

Qué debo agregar para que funcione?

function copiar(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
document.getElementById("boton1").addEventListener("click", function () {
  // Generate download of .txt file with some content
  var text = document.getElementById("input1").value;
  var filename = "exportado.txt";

  copiar(filename, text);
}, false);
<textarea id="input1">HOLA</textarea>
<button id="boton1">Exportar</button>

5
  • 1
    Jolin Oscar, iba a hacerlo yo :-)... ahora debemos esperar a que alguien más lo apruebe (si lo hago directo creo que no se necesitan votos)
    – masterguru
    el 18 mar. 2022 a las 14:55
  • Si es un div debes cambiar el .value por .innerHTML
    – masterguru
    el 18 mar. 2022 a las 14:56
  • 1
    Básicamente solo necesitas cambiar var text = document.getElementById("input1").value; por var text = document.getElementById("input1").innerText; cambiando el id input1 por el id del div que quieres exportar. el 18 mar. 2022 a las 14:57
  • 1
    Y no pongas el código en un enlace... lo que has hecho en el jsfiddle se puede reproducir perfectamente en un snippet (fragmento) y así la pregunta queda autocontenida y es perfecta (es lo que Oscar ha hecho, ha editado tu pregunta y te ha puesto el código en un snippet, pero no lo verás hasta que tu lo apruebes creo, o bien tenga más votos... yo ya he dado el mio pero faltan mas)
    – masterguru
    el 18 mar. 2022 a las 14:58
  • Una disculpa por no ponerlo incrustado, lo había puesto en JSFiddle porque en stackoverflow no se ejecutaba el 18 mar. 2022 a las 15:26

3 respuestas 3

1

Para recuperar el texto del div tienes que usar la propiedad textContent en lugar de value. Tambien es bueno aclarar que no es lo mismo usar innerHTML en su lugar ya que copiara el html tal como esta como es con el caso de &nbsp; que pasara como un texto y no como un espacio.

function copiar(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
document.getElementById('boton1').addEventListener('click', function() {
  // Generate download of .txt file with some content
  var text = document.querySelector('#div-text');
  var filename = 'exportado.txt';

  copiar(filename, text.textContent);
});
<div contenteditable="true" id="div-text">Agrega un texto aqui: &nbsp;</div>

<button id="boton1">Exportar</button>

2
  • gracias! Funciona bien, pero porqué se exporta todo en una sola linea? Es decir, el div tiene textos uno debajo del otro en <br> pero el código que has puesto los exporta inline el 18 mar. 2022 a las 15:29
  • Acabo de hacer la prueba y los <br /> si los reconoce como un salto de linea. el 18 mar. 2022 a las 15:52
0

Solucionado, como me dijeron en los comentarios, bastó con reemplazar:

var text = document.getElementById("input1").value;

Por: var text = document.getElementById("input1").innerText;

Muchas gracias.

function copiar(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
document.getElementById("boton1").addEventListener("click", function () {
  // Generate download of .txt file with some content
  var text = document.getElementById("input1").innerText;
  var filename = "exportado.txt";

  copiar(filename, text);
}, false);
<textarea id="input1">HOLA</textarea>
<button id="boton1">Exportar</button>

1
  • 1
    que bien, éxitos estimado @NotoriusSha el 18 mar. 2022 a las 19:39
0

Para obtener el contenido HTML dentro de un div, utilizar .innerHTML:

 var mayDiv = document.getElementById("mydivdata").innerHTML;

Para obtener el TEXTO dentro del div:

 var mayDiv = document.getElementById("mydivdata").innerText;
3
  • 3
    innerHTML no te exportará el texto del elemento, te exportará el código html de todo lo que tenga dentro. el 18 mar. 2022 a las 15:03
  • @JaimeMenéndez tiene razón, acabo de probarlo y lo exportó con todo y etiquetas. El código de Bladimir me funcionó, pero lo exporta todo en una sola linea, como soluciono eso? Por favor el 18 mar. 2022 a las 15:41
  • 1
    @NotoriusSha usa innerText en lugar de innerHTML. el 18 mar. 2022 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.