JSFiddle - React, Tailwind, and code Playground
HTML
<div class="output">
<p>Download these auto-generated files:</p>
<ul id="files"></ul>
</div>
JavaScript
var filesElement = document.querySelector('#files');
var fileData = {
'sample.xml': {
data: '<test>Hello!</test>',
type: 'application/xml'
},
'sample.csv': {
data: 'Test1,Test2\nHello1,Hello2',
type: 'text/csv'
},
'sample.json': {
data: JSON.stringify({test: 'Hello!'}),
type: 'application/json'
}
};
Object.keys(fileData).forEach(function(name) {
var file = new File([fileData[name].data], name, {
type: fileData[name].type,
lastModified: Date.now()
});
var url = URL.createObjectURL(file, {
oneTimeOnly: true
});
var aElement = document.createElement('a');
aElement.href = url;
aElement.download = name;
aElement.textContent = name;
var liElement = document.createElement('li');
liElement.appendChild(aElement);
filesElement.appendChild(liElement);
});