Below is a simplified version of my React component:
export class SomePage extends Component {
downloadAsHTML() {
const element = document.createElement("a");
const file = new Blob([document.getElementById('second-child-div').outerHTML], {
type: "text/html"
});
element.href = URL.createObjectURL(file);
element.download = "file.html";
document.body.appendChild(element);
element.click();
}
render () {
return (
<>
<div className="first-child-div">Stuff here</div>
<div id="second-child-div" onClick={() => this.downloadAsHTML()}>
<span className="some-other-styling-here">
<h1>Title</h1>
<p>Paragraph</p>
More things here
</span>
More html elements, nested styling, and text here
</div>
</>
)
}
}
When the user clicks on second-child-div and the div gets downloaded as an .html file, I want the downloaded .html file to retain the styling of all the classNames and html selectors (like #second-child-div h1 that would be in .css). What is the best way to do this?
One approach I'm considering is creating another file called Styles.js:
const Styles = {
container: {
'padding': '30px',
'border'
},
anotherContainer: {
'color': 'blue',
'background': 'yellow'
}
containerH1: {
'font-size': '20px'
}
containerParagraph: {
'font-size': '20px'
},
}
export default Styles;
and then import it like so:
import "Styles" from "./Styles.js"
//in second-child-div:
<div id="second-child-div" style={Styles.container} onClick={() => this.downloadAsHTML()}>
<span style={Styles.anotherContainer}>
<h1 style={Styles.containerH1}>Title</h1>
<p style={Styles.containerParagraph}>Paragraph</p>
More things here
</span>
More html elements, nested styling, and text here
</div>
In my actual application, I have numerous styling rules with css selectors and so forth. What would be the most efficient way to handle this?