The title may be confusing, so let me expand a little more:
My goal is to have a front end framework/(library), like React, Vue, or Angular, that has a normal user interface stuff, such as the user inputting data or an uploading an image to a server.
I then want the web app to basically make an HTML email. So, I'm thinking the best way is to create a text file of HTML, but it will be of the format .eml instead of .txt so it's easy to open in mail clients and send the email.
My question: - How can I create a string of dynamic HTML that is then saved as a file for the user to download. dynamic meaning sometimes it may be just 1 or 2 items, sometimes it may be 15, but the point is that the variable will change and a loop will be run for as many objects as there are so that the appropriate amount of HTML will be created.
I'm asking because we all know how to display a view in React/others, but how can we get a programmatic pseudo-view in the logic code. That is, how do we get a string representation of the views output of the resulting html, if that makes sense. And then create an .eml file holding that html so the user can download.
Is this even possible in the operations of today's popular frameworks?
====
EDIT
Just an idea I had from research, for generating the file it seems a Blob might be best.
var file = new Blob([html_string], {type: 'text/plain'})
Some, for React, some code would be like the following (thanks to Chris's answer from this SO question.)
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"));
Which leaves the question of how to create the string of HTML. Maybe ES6 template literals with embedded expressions? But, that wouldn't be JSX exactly, so I'm not sure how to throw a for loop in there. I'll continue researching or if someone knows how to throw all this together.
