I'm trying to convert my html to pdf in react using html2pdf library but for some reason, its inserting padding on its own to the divs in the downloaded pdf. But when I'm using the same code in vanilla javascript, its working perfectly fine.
Section with the issue
<section
className="relative w-full bg-white"
style={{ height: "236mm" }}
>
<div className=" flex w-full ">
<div className=" w-full mx-5 ">
<div className=" ">
<h1
className="titleq text-4xl tracking-widest whitespace-nowrap font-semibold mt-4 "
style={{ color: "#015E72" }}
>
Overview
</h1>
<p
className=" whitespace-nowrap font-semibold mt-2 mx-2 titlex"
style={{ fontSize: "medium" }}
>
{" "}
<span style={{ color: "#737373" }}>Itinerary for</span>{" "}
<span style={{ color: "#00B8C4" }}>5 Nights & 6 Days</span>{" "}
</p>
<div className=" flex gap-5 whitespace-nowrap text-xs mt-1 pb-3 mx-1 titlex">
<p>
{" "}
<span className=" font-semibold mx-1 ">Arrival:</span>
21/03/2024
</p>
<p>
<span className=" font-semibold mx-1 ">Departure:</span>
3/26/2024
</p>
</div>
</div>
<div className=" parent flex gap-5 border-t-2 border-b-2 titlex">
<div
className="w-20 items-center flex justify-center "
style={{ backgroundColor: "#015E72" }}
>
<h3 className=" "> Day 1 </h3>
</div>
<div className="days flex flex-col space-y-2 py-3">
<div className="flex items-center gap-5">
<table className="w-full">
<tr className="space-x-8">
<td className="font-semibold">Sightseeing</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Srinagar</td>
</tr>
<tr className="space-x-8">
<td className="font-semibold">Hotel Stay At</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Home in Paradise</td>
</tr>
</table>
</div>
</div>
</div>
<div className=" parent flex gap-5 border-t-2 border-b-2 titlex">
<div
className=" w-20 text-center items-center flex justify-center "
style={{ backgroundColor: "#D9F6FA" }}
>
<h3 className=" whitespace-nowrap m-0 "> Day 2 </h3>
</div>
<div className="days flex flex-col space-y-2 py-3">
<div className="flex items-center gap-5">
<table className="w-full">
<tr className="space-x-8">
<td className="font-semibold">Sightseeing</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Sona,marg</td>
</tr>
<tr className="space-x-8">
<td className="font-semibold">Hotel Stay At</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Home in Paradise</td>
</tr>
</table>
</div>
</div>
</div>
<div className=" parent flex gap-5 border-t-2 border-b-2 titlex">
<div
className=" w-20 text-center items-center flex justify-center "
style={{ backgroundColor: "#015E72" }}
>
<h3 className=" whitespace-nowrap m-0 "> Day 3 </h3>
</div>
<div className="days flex flex-col space-y-2 py-3">
<div className="flex items-center gap-5">
<table className="w-full">
<tr className="space-x-8">
<td className="font-semibold">Sightseeing</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Doodhpathri </td>
</tr>
<tr className="space-x-8">
<td className="font-semibold">Hotel Stay At</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Home in Paradise</td>
</tr>
</table>
</div>
</div>
</div>
<div className=" parent flex gap-5 border-t-2 border-b-2 titlex">
<div
className=" w-20 text-center items-center flex justify-center "
style={{ backgroundColor: "#D9F6FA" }}
>
<h3 className=" whitespace-nowrap m-0 "> Day 4 </h3>
</div>
<div className="days flex flex-col space-y-2 py-3">
<div className="flex items-center gap-5">
<table className="w-full">
<tr className="space-x-8">
<td className="font-semibold">Sightseeing</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Gulmarg</td>
</tr>
<tr className="space-x-8">
<td className="font-semibold">Hotel Stay At</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Zahgeer Continental</td>
</tr>
</table>
</div>
</div>
</div>
<div className=" parent flex gap-5 border-t-2 border-b-2 titlex">
<div
className=" w-20 text-center items-center flex justify-center "
style={{ backgroundColor: "#015E72" }}
>
<h3 className=" whitespace-nowrap m-0 "> Day 5 </h3>
</div>
<div className="days flex flex-col space-y-2 py-3">
<div className="flex items-center gap-5">
<table className="w-full">
<tr className="space-x-8">
<td className="font-semibold">Sightseeing</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Pahalgam</td>
</tr>
<tr className="space-x-8">
<td className="font-semibold">Hotel Stay At</td>
<td></td>
<td className="font-semibold">:</td>
<td></td>
<td className="">Pahalgam Peaks</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div className=" " style={{ width: "50%", height: "237mm" }}>
<img
className="w-full h-full"
src=" https://tripdocks-images-bucket.s3.ap-south-1.amazonaws.com/Company/KAshmir%20DAsh%20%281%29.png?X-Amz-Expires=604800&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAR3BJ4BUYEYXQ5HPZ%2F20240213%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20240213T151509Z&X-Amz-SignedHeaders=host&X-Amz-Signature=052c26dc33e359c5f3424f970873ebcced76cf7d4a8b181ca82c72405d747c74"
alt=" "
srcset=" "
style={{ objectFit: "cover", height: "220mm" }}
/>
</div>
<div className=" w-full absolute bottom-1">
<div className="w-full flex">
<div className=" w-1/2 flex items-end ml-2">
<div className="">
<img
className="w-8 h-7"
src=" https://tripdocks-images-bucket.s3.ap-south-1.amazonaws.com/Company/Logo%20Crop_77a46fb1-ac8f-4856-a121-3054f3acbfed.png?X-Amz-Expires=604800&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAR3BJ4BUYEYXQ5HPZ%2F20240213%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20240213T151509Z&X-Amz-SignedHeaders=host&X-Amz-Signature=3f19a9b10f257d7424045c439bd653ae52d9f0ddb0c3cfa8543517d83a6925c6"
crossorigin="anonymous"
alt=""
srcset=""
/>
</div>
<div className=" relative">
<p
className="font-semibold absolute bottom-0 whitespace-nowrap"
style={{ color: "#015d72cf", fontSize: "x-small" }}
>
<div>
<p>6005646020</p>
<p>Kashmir Dash Holidays</p>
</div>
</p>
</div>
</div>
<div className=" w-1/2 flex justify-end items-end">
<div className="flex justify-center items-center">
<img
className="w-5 h-5 "
src="https://emecbucket.s3.ap-south-1.amazonaws.com/test-images/logob.png"
alt=""
crossorigin="anonymous"
srcset=""
/>
<p
className="font-semibold text-xs mr-5"
style={{ color: "#015d72cf" }}
>
Powered by TripDocks
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Download PDF code
const options = {
filename: "Package Trial.pdf",
html2canvas: { scale: 1.5, useCORS: true },
jsPDF: {
format: [236, 229], // Custom page size (height x width) in millimeters
orientation: "portrait",
},
margin: [0, -2.2, -3, 0], // Adjust margins as needed
pagebreak: { mode: "avoid-all" }, // Add page break between sections
};
html2pdf().set(options).from(printableRef.current).save();
This is the Actual Page written
This is the pdf I get after downloading