Как скачать содержимое блока html через js?

Рейтинг: 0Ответов: 1Опубликовано: 06.03.2023

Есть блок content в котором несколько (изначально они пустые), в js происходит генерация текста и потом текст записывается в h1, подскажите как после генерации нажатием на кнопку скачать весь текст который записался в несколько h1

  <div class="resume">
    <h1>Выберите тип резюме:</h1>
    <button id="hronolog" onclick="Hronolog()" name="otpravit">Хронологическое</button>
    <button id="function" onclick="Functional()">Функциональное</button>
    <button id="combinir" onclick="Combin()">Комбинированное</button>
</div>

<div class="result-resume" id="result-r">
    <div class="cont">
        <div id = "content">
    <p id="fio"></p>
    <p id="date"></p>
    <p id="address"></p>
    <p id="numba"></p>
    <p id="email"></p>
    <p id="chel"></p>
    <p id="dolj"></p>
    <p id="opit"></p>
    <p id="obyaz"></p>
    <p id="achiv"></p>
    <p id="obraz"></p>
    <p id="prof"></p>
    <p id="kach"></p>
    <p id="tran"></p>
</div>
</div>
</div>
</body>

<button id = "b">сoхранить</button>
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Если я правильно вас понял, то нужно скачать содержимое из тегов <p>, которые находятся в контейнере <div> с id content

Можете вызывать эту функцию при нажатии на кнопку

function downloadText() {
  // Контейнер откуда скачать
  const div = document.querySelector('#content');
  // Элементы которые нужно скачать
  const paragraphs = div.querySelectorAll('p');

  let fileContent = '';

  // Формат id тега: контент 
  paragraphs.forEach((p) => {
    const id = p.getAttribute('id');
    const content = p.textContent;
    fileContent += `${id}: ${content}\n`;
  });

  // Создаем ссылку для скачивания файла
  const file = new Blob([fileContent], {type: 'text/plain'});
  const url = URL.createObjectURL(file);
  const link = document.createElement('a');

  link.href = url;
  link.download = 'file.txt';

  document.body.appendChild(link);

  link.click();

  document.body.removeChild(link);

  URL.revokeObjectURL(url);
}