Как конвертировать HTML в Word на JavaScript

Как конвертировать HTML в Word на JavaScript

25 марта 2020 HTML JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите преобразовать HTML в документ Word, без плагинов или библиотек простым JavaScript-кодом, тогда читайте эту статью.

Для экспорта HTML нам потребуется немного простого кода JavaScript, где к исходному HTML добавляется содержимое переменных header и footer. Переменные содержат обычную HTML-разметку и пространства имен XML, необходимые для документа в формате .doc. Так же JS-скрипт динамически создаст ссылку для загрузки документа с названием файла.

HTML-код

На целевой странице будет отображаться просто отформатированный контент HTML с кнопкой управления экспортом. При нажатии этой кнопки будет вызвана JavaScript-функция exportHTML(). Часть HTML, которая будет экспортирована в документ Word, будет идентифицирована с помощью селектора id. В данном случае содержимое элемента div с id="source-html«.

<div id="source-html">
    <h1>Искусственный интеллект</h1>
    <h2>Обзор</h2>
    <p>
        Искусственный интеллект (ИИ) - это новая технология демонстрирующая машинный интеллект. Технологии, такие как <u><i>Нейронные Сети</i>, <i>Робототехника</i>или<i> Машинное обучение </i></u> части ИИ. Ожидается, что эта технология станет основной частью реального мира на всех уровнях.

    </p>
</div>
<div class="content-footer">
    <button id="btn-export" onclick="exportHTML();">Сохранить в Word</button>
</div>

Функция JavaScript для конвертации HTML в Word

Перейдем непосредственно к самой функции JavaScript. Функция создает переменную header, содержащую XML-код, необходимый для формата .doc и HTML-разметку. В переменной footer содержатся закрывающие HTML-теги документа. Далее скрипт получает HTML-код содержащийся в контейнере div с id="source-html" и добавляет к нему содержимое переменных header и footer. В заключительном этапе динамически формируется ссылка на загрузку документа Word с указанным названием.

<script>
    function exportHTML(){
       var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+
            "xmlns:w='urn:schemas-microsoft-com:office:word' "+
            "xmlns='http://www.w3.org/TR/REC-html40'>"+
            "<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>";
       var footer = "</body></html>";
       var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
       
       var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
       var fileDownload = document.createElement("a");
       document.body.appendChild(fileDownload);
       fileDownload.href = source;
       fileDownload.download = 'document.doc';
       fileDownload.click();
       document.body.removeChild(fileDownload);
    }
</script> 
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
3D фотоэффект изображения на JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Фильтрация и сортировка на JS с помощью библиотеки MixItUp

MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Яндекс карта с управлением для сайта

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

В основном, модальное окно - это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени Читать далее

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Добавить комментарий

*

code