<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
function App() {
const [url, setUrl] = React.useState('https://www.sarkarinaukriexams.com/images/post/1614258834up_si_syllabus_pdf_in_hindi.pdf');
const downloadFile = () => {
axios({
url,
method: 'GET',
responseType: 'blob',
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'syallbus.pdf');
document.body.appendChild(link);
link.click();
});
};
const handleUrlChange = (event) => {
setUrl(event.target.value);
};
return (
<div className="container">
<h3 className="title">React Download PDF from API | URL</h3>
<input
type="text"
placeholder="Enter PDF URL"
value={url}
onChange={handleUrlChange}
className="input"
/>
<button onClick={downloadFile} className="button">Download File</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
<style>
.container {
margin: 0 auto;
width: 600px;
text-align: center;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
padding: 20px;
}
/* Title */
.title {
font-size: 24px;
margin: 20px 0;
color: #333;
text-decoration: underline;
}
/* Input */
.input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #333;
border-radius: 5px;
margin: 10px 0;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.input::placeholder {
color: #999;
}
.input:focus {
border-color: #007BFF;
}
/* Button */
.button {
padding: 10px 20px;
font-size: 18px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
</style>
</body>
</html>