১৯-৯ : এপয়নমেন্ট পিডিএফ জেনারেশন ও ডাউনলোড
এই মডিউলে আমরা দেখব কিভাবে এপয়নমেন্টের জন্য পিডিএফ তৈরি করা ও তা ডাউনলোড করার ব্যবস্থা করা যায় ।
pdf.js ফাইল ক্রিয়েট করে ফেলি-
Code:: 19.9.1 pdf.js
const handlePdf = () => {
const doctor_id = new URLSearchParams(window.location.search).get("doctorId");
console.log(doctor_id);
const user_id = localStorage.getItem("user_id");
console.log(`https://testing-8az5.onrender.com/users/${user_id}`);
fetch(`https://testing-8az5.onrender.com/doctor/list/${doctor_id}`)
.then((res) => res.json())
.then((data) => {
fetch(`https://testing-8az5.onrender.com/users/${user_id}`)
.then((res) => res.json())
.then((pdData) => {
const newData = [data, pdData];
console.log(newData);
const parent = document.getElementById("pdf-container");
const div = document.createElement("div");
div.innerHTML = `
<div class="pd d-flex justify-content-around align-items-center p-5">
<div class="patient doctor p-5">
<h1>${newData[1].username}</h1>
<h1>${newData[1].first_name} ${newData[1].last_name}</h1>
<h4>${newData[1].email}</h4>
</div>
<div class="doctor p-5">
<img class="w-25" src=${newData[0].image}/>
<h2 class="doc-name">${newData[0].full_name}</h2>
<h3>designation: designation</h3>
<h5>specialization: specialization</h5>
</div>
</div>
<input id="pdf-symtom" class="symtom" type="text" />
<h1 id="pdf-fees" class="text-center p-2 mt-3">Fees: ${newData[0].fee}BDT</h1>
`;
parent.appendChild(div);
donwloadPdf();
});
});
};
const donwloadPdf = () => {
const element = document.getElementById("pdf-container");
// Define the options for html2pdf
const options = {
margin: 10,
filename: "appt.pdf",
image: { type: "jpeg", quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
};
// Use html2pdf to generate and download the PDF
html2pdf(element, options);
};
handlePdf();
pdf ডিজাইনের জন্য pdf.html ফাইলটি ক্রিয়েট করে ফেলি -
Code:: 19.9.2 pdf.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pdf</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="..."
/>
<link
href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="pdf-container" class="pdf-container text-center">
<h1 class="text-info text-center p-5 mt-5">SMART CARE</h1>
</div>
<button onclick="handleDownload()">Hello</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
<script src="./docDetails.js"></script>
<script src="./pdf.js"></script>
<script src="./app.js"></script>
<script src="./docDetails.js"></script>
<script src="./logout.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
integrity="..."
></script>
</body>
</html>
style.css ফাইলটি নিচের মত করে লিখে ফেলি -
Code:: 19.9.3 style.css
body{
/* width: 1200px; */
/* border: 1px solid gray; */
margin: auto;
background-color: rgb(241, 234, 234);
}
li{
list-style: none;
}
nav{
background-color:aqua;
}
.menu{
font-size: 20px;
}
.menu:hover{
color: white;
cursor: pointer;
}
.banner-container{
width: 1200px;
margin: auto;
padding: 30px;
}
.banner{
height: 450px;
margin: auto;
display: flex;
text-align: center;
justify-content: space-around;
align-items: center;
background: linear-gradient(cyan,rgb(33, 137, 137));
box-shadow: 4px 4px 8px gray;
border-radius:10px;
/* padding: 30px; */
}
.bn-img{
width: 325px;
margin-top:-50px;
}
.service-container{
width: 1200px;
margin: auto;
margin-top: 50px;
}
.title{
font-size: 44px;
color: aqua;
text-align: center;
}
.doctors-container{
margin-top: 50px;
padding: 30px;
}
.doc-card{
width: 300px;
height: 360px;
box-shadow: 4px 4px 8px gray;
border-radius: 10px;
text-align:center;
padding: 15px;
}
.doc-img{
width: 100px;
height: 100px;
border-radius: 50px;
}
#search{
padding:10px;
width: 75%;
border: none;
}
#noData{
display: none;
}
.nodata{
display: none;
}
#spinner{
display: none;
}
.review-card{
width: 250px;
height: 300px;
box-shadow: 4px 4px 8px gray;
border-radius:10px;
text-align: center;
padding: 10px;
}
.review-card img{
width: 70px;
height: 70px;
border-radius:50px;
}
footer{
padding: 50px;
background: linear-gradient(66deg, #1CA8C7 -5.25%, #439FA5 46.76%, #4C7D8C 98.77%);;
}
.doctor-img img{
width: 150px;
height: 150px;
border-radius: 100px;
}
.doc-details-container{
display: flex;
justify-content: space-around;
padding: 30px;
gap: 50px;
width: 75%;
margin: auto;
}
.doc-detail-btn{
border: none;
padding:5px 10px;
background-color:gray;
color: white;
border-radius: 5px;
}
.user-detais-container{
height: 100vh;
width: 75%;
margin: auto;
}
.user-img img{
width: 200px;
height: 200px;
border-radius:100px;
}
.user-all{
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
}
.all-appointment-container{
width: 90%;
margin: auto;
height: 100vh;
}
.doctor{
width: 350px;
height:400px;
box-shadow: 4px 4px 8px gray;
text-align: center;
background-color:gray;
color: white;
border-radius:10px;
}
.symtom{
width: 50%;
padding: 20px;
margin: 20px;
border: none;
}.
Last updated