screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React Download JSON Data</title> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState } = React; function App() { const data = [ { name: 'Michael Brown', age: 32, email: 'michaelbrown@example.com' }, { name: 'Emily Wilson', age: 29, email: 'emilywilson@example.com' }, { name: 'David Lee', age: 45, email: 'davidlee@example.com' }, { name: 'Olivia Turner', age: 27, email: 'oliviaturner@example.com' }, { name: 'James Miller', age: 38, email: 'jamesmiller@example.com' }, { name: 'Sophia Harris', age: 22, email: 'sophiaharris@example.com' }, { name: 'Matthew Taylor', age: 33, email: 'matthewtaylor@example.com' } ]; const downloadFile = () => { const jsonData = JSON.stringify(data, null, 2); const blob = new Blob([jsonData], { type: 'application/json' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'data.json'; document.body.appendChild(link); link.click(); URL.revokeObjectURL(url); document.body.removeChild(link); }; return ( <div className='container'> <h3>React Download JSON Data on Click</h3> <button onClick={downloadFile}>Download JSON Data</button> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> /* Container styles */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; } /* Heading styles */ h3 { font-size: 24px; margin-bottom: 20px; color: #333; } /* Button styles */ button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } </style> </body> </html>