Создание файла.eml из динамических веб-компонентов (React/Vue/Angular) [строка скомпилированного html]

Question

Название может вводить в заблуждение, поэтому позвольте мне рассказать немного подробнее:

Моя цель состоит в том, чтобы иметь интерфейсную среду /(библиотеку), такую ​​как React, Vue или Angular, которая имеет обычные элементы пользовательского интерфейса, такие как пользователь, вводящий данные или загружающий изображение на сервер.

Затем я хочу, чтобы веб-приложение создавало электронную почту в формате HTML. Итак, я думаю, что лучший способ - это создать текстовый файл HTML, но он будет иметь формат .eml вместо.txt, так что легко открывать в почтовых клиентах и ​​отправлять электронную почту.

Мой вопрос: - Как я могу создать строку динамического HTML, которая затем сохраняется в виде файла для загрузки пользователем. динамическое значение, иногда это может быть только 1 или 2 элемента, иногда это может быть 15, но дело в том, что переменная изменится, и цикл будет запущен для столько объектов, сколько существует, так что будет создано соответствующее количество HTML,

Я спрашиваю, потому что мы все знаем, как отобразить view в React / others, но как мы можем получить программный псевдо-вид в логическом коде. То есть, как мы можем получить строковое представление результатов представления итогового HTML, если это имеет смысл. А затем создать .eml файл, содержащий этот HTML, чтобы пользователь мог загрузить.

Возможно ли это даже в операциях современных популярных фреймворков?

====

РЕДАКТИРОВАТЬ

Просто идея, которую я получил из исследований, для создания файла, кажется, Blob может быть лучше.

var file = new Blob([html_string], {type: 'text/plain'})

Некоторые, для React, некоторый код будет выглядеть следующим образом (благодаря ответу Криса на этот SO вопрос).

class MyApp extends React.Component {
_downloadTxtFile = () => {
    var element = document.createElement("a");
    var file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = "myFile.txt";
    element.click();
}

render() {
    return (
    <div>
        <input id="myInput" />
        <button onClick={this._downloadTxtFile}>Download txt</button>
    </div>
    );
}
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

Что оставляет вопрос о том, как создать строку HTML. Может быть шаблонные литералы ES6 со встроенными выражениями? Но это не совсем JSX, так что я не знаю, как бросить for Цикл там. Я продолжу исследование или, если кто-то знает, как все это бросить.