# ১৯-৯ : এপয়নমেন্ট পিডিএফ জেনারেশন ও ডাউনলোড

এই মডিউলে আমরা দেখব কিভাবে এপয়নমেন্টের জন্য পিডিএফ তৈরি করা ও তা ডাউনলোড করার ব্যবস্থা করা যায় ।

pdf.js ফাইল ক্রিয়েট করে ফেলি-

<mark style="color:green;">**Code:: 19.9.1**</mark> \
<mark style="color:red;">pdf.js</mark>

{% code lineNumbers="true" %}
```javascript
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();

```
{% endcode %}

pdf ডিজাইনের জন্য pdf.html ফাইলটি ক্রিয়েট করে ফেলি -

<mark style="color:green;">**Code:: 19.9.2**</mark>\
<mark style="color:red;">pdf.html</mark>

{% code lineNumbers="true" %}
```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>

```
{% endcode %}

style.css  ফাইলটি নিচের মত করে লিখে ফেলি -

<mark style="color:green;">**Code:: 19.9.3**</mark>\
<mark style="color:red;">style.css</mark>

{% code lineNumbers="true" %}
```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;
}
```
{% endcode %}

.

