সর্বপ্রথম আপনাকে:
- npm i jspdf
- npm i jspdf-autotable
- npm i xlsx
এই তিনটা npm package install করতে হবে। এবার নিচের মত কোড লিখতে হবেঃ
Download PDF:
/ download transaction
const exportToPDF = () => {
const currentDate = new Date().toLocaleString("en-US", { timeZone: "Asia/Dhaka" });
const doc = new jsPDF();
doc.text("Transaction Details", 10, 10);
doc.text(`Date: ${currentDate}`, 10, 20);
doc.text(`Total Amount: ${allTransaction.reduce((pre, cur) => pre + parseInt(cur?.amount), 0)} BDT`, 10, 30);
autoTable(doc, {
startY: 40,
head: [["DATE", "PAID AMOUNT", "PREVIOUS TOTAL", "NEW TOTAL", "STATUS"]],
body: allTransaction.map((fish) => [fish.date, fish.amount, fish.previousTotal, fish.newTotal, fish.status]),
});
doc.save("transaction-details.pdf");
};
Download Excell File:
const exportToExcel = () => {
const worksheet = XLSX.utils.json_to_sheet(allTransaction);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Transaction Details");
XLSX.writeFile(workbook, "transaction-details.xlsx");
};
যে বাটনে ক্লিক করলে ডাউনলোড হবে সেখানে ফাংশানটা ইমপ্লিমেন্ট করে দিতে হবেঃ
<Button onClick={exportToExcel} color="outline" variant="contained">
<FaDownload className='me-2' />
Excel
</Button>
<Button onClick={exportToPDF} color="outline" variant="contained">
<FaDownload className='me-2' />
PDF
</Button>
Note: এক্ষেত্রে সর্বদা ডাটা গুলা array of object ফর্মাটে থাকতে হবে। এক্ষত্রে আমার ডাটা ফর্মাট ছিলঃ
[{
"_id": {
"$oid": "67cb9a23792f6d2f67d625da"
},
"fishermanId": {
"$oid": "67cabbfee26ae712f8b0970a"
},
"name": "Sumaiya and Hafizs",
"mobile": "1234235",
"amount": 9,
"date": "3/8/2025, 7:15:15 AM",
"previousTotal": 29,
"newTotal": 20,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d01528346efa7e1d331afb"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 40,
"date": "3/11/2025, 4:49:12 PM",
"previousTotal": "1149",
"newTotal": 1109,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d0155f346efa7e1d331afc"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 31,
"date": "3/11/2025, 4:50:07 PM",
"previousTotal": 1109,
"newTotal": 1078,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d016d8346efa7e1d331afd"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 78,
"date": "3/11/2025, 4:56:24 PM",
"previousTotal": 1078,
"newTotal": 1000,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d016df346efa7e1d331afe"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 10,
"date": "3/11/2025, 4:56:31 PM",
"previousTotal": 1000,
"newTotal": 990,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d016e3346efa7e1d331aff"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 10,
"date": "3/11/2025, 4:56:35 PM",
"previousTotal": 990,
"newTotal": 980,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d01fa5a344f4520bab21a9"
},
"fishermanId": {
"$oid": "67d01a77c57b9a98decf3c80"
},
"name": "Test",
"mobile": "4444",
"amount": 1,
"date": "3/11/2025, 5:33:57 PM",
"previousTotal": 10,
"newTotal": 9,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d01fb0a344f4520bab21aa"
},
"fishermanId": {
"$oid": "67d01a77c57b9a98decf3c80"
},
"name": "Test",
"mobile": "4444",
"amount": 1,
"date": "3/11/2025, 5:34:08 PM",
"previousTotal": 9,
"newTotal": 8,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d03074f17c96835d5534e1"
},
"fishermanId": {
"$oid": "67d03050f17c96835d5534e0"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 6:45:40 PM",
"previousTotal": 10,
"newTotal": 8,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d03078f17c96835d5534e2"
},
"fishermanId": {
"$oid": "67d03050f17c96835d5534e0"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 6:45:44 PM",
"previousTotal": 8,
"newTotal": 6,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d032accbbbad8bf522ceb0"
},
"fishermanId": {
"$oid": "67d03287cbbbad8bf522ceaf"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 6:55:08 PM",
"previousTotal": 10,
"newTotal": 8,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d032b2cbbbad8bf522ceb1"
},
"fishermanId": {
"$oid": "67d03287cbbbad8bf522ceaf"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 6:55:14 PM",
"previousTotal": 8,
"newTotal": 6,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d03386cbbbad8bf522ceb6"
},
"fishermanId": {
"$oid": "67d03367cbbbad8bf522ceb5"
},
"name": "Test",
"mobile": "4444",
"amount": 4,
"date": "3/11/2025, 6:58:46 PM",
"previousTotal": 10,
"newTotal": 6,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d03ec75d4fe4d35d0b7e3b"
},
"fishermanId": {
"$oid": "67d03c4b5d4fe4d35d0b7e38"
},
"name": "Test",
"mobile": "4444",
"amount": 10,
"date": "3/11/2025, 7:46:47 PM",
"previousTotal": 20,
"newTotal": 10,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d04541e89a6646947ec027"
},
"fishermanId": {
"$oid": "67d044a57ce0c09f12520c3f"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 8:14:25 PM",
"previousTotal": 10,
"newTotal": 8,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d04546e89a6646947ec028"
},
"fishermanId": {
"$oid": "67d044a57ce0c09f12520c3f"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 8:14:30 PM",
"previousTotal": 8,
"newTotal": 6,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d048843009648e390cd559"
},
"fishermanId": {
"$oid": "67d048043009648e390cd558"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 8:28:20 PM",
"previousTotal": 10,
"newTotal": 8,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d0488b3009648e390cd55a"
},
"fishermanId": {
"$oid": "67d048043009648e390cd558"
},
"name": "Test",
"mobile": "4444",
"amount": 2,
"date": "3/11/2025, 8:28:27 PM",
"previousTotal": 8,
"newTotal": 6,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d04b1dfeb6eef6389f03c5"
},
"fishermanId": {
"$oid": "67d04b09feb6eef6389f03c4"
},
"name": "Test",
"mobile": "444",
"amount": 5,
"date": "3/11/2025, 8:39:25 PM",
"previousTotal": 15,
"newTotal": 10,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d04b23feb6eef6389f03c6"
},
"fishermanId": {
"$oid": "67d04b09feb6eef6389f03c4"
},
"name": "Test",
"mobile": "444",
"amount": 5,
"date": "3/11/2025, 8:39:31 PM",
"previousTotal": 10,
"newTotal": 5,
"status": "completed",
"isShow": false
},
{
"_id": {
"$oid": "67d16f8524e022c30cc115a7"
},
"fishermanId": {
"$oid": "67cc05a3165990b5944926d1"
},
"name": "Sumaiya and Hafiz",
"mobile": "01797553031",
"amount": 8,
"date": "3/12/2025, 5:27:01 PM",
"previousTotal": 368,
"newTotal": 360,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d16f8824e022c30cc115a8"
},
"fishermanId": {
"$oid": "67cc05a3165990b5944926d1"
},
"name": "Sumaiya and Hafiz",
"mobile": "01797553031",
"amount": 5,
"date": "3/12/2025, 5:27:04 PM",
"previousTotal": 360,
"newTotal": 355,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d16f8c24e022c30cc115a9"
},
"fishermanId": {
"$oid": "67cc05a3165990b5944926d1"
},
"name": "Sumaiya and Hafiz",
"mobile": "01797553031",
"amount": 67,
"date": "3/12/2025, 5:27:08 PM",
"previousTotal": 355,
"newTotal": 288,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67d6828339742cfcb97da8d8"
},
"fishermanId": {
"$oid": "67d65f0c39742cfcb97da8d2"
},
"name": "Morium Khatun",
"mobile": "01989588537",
"amount": 62,
"date": "3/16/2025, 1:49:23 PM",
"previousTotal": 3762,
"newTotal": 3700,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67da484ad1be0969b1e0a1b7"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 2,
"date": "3/19/2025, 10:30:01 AM",
"previousTotal": 121102,
"newTotal": 121100,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67da485cd1be0969b1e0a1b8"
},
"fishermanId": {
"$oid": "67cc058f165990b5944926cd"
},
"name": "Hafizur Rahman",
"mobile": "01910674261",
"amount": 100,
"date": "3/19/2025, 10:30:20 AM",
"previousTotal": 121100,
"newTotal": 121000,
"status": "completed",
"isShow": true
},
{
"_id": {
"$oid": "67da5d28065daeb835eef970"
},
"fishermanId": {
"$oid": "67da5d1f065daeb835eef96f"
},
"name": "adfasdf",
"mobile": "4444",
"amount": 16,
"date": "3/19/2025, 11:59:04 AM",
"previousTotal": 16,
"newTotal": 0,
"status": "completed",
"isShow": true
}]
إرسال تعليق