export pdf

package.json

@@ -48,6 +48,8 @@
     "font-awesome": "^4.7.0",
     "history": "^5.2.0",
     "interactjs": "^1.10.11",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.5.25",
     "leaflet": "^1.7.1",
     "leaflet-defaulticon-compatibility": "^0.1.1",
     "leaflet-draw": "^1.0.4",

src/views/SimproV2/CreatedProyek/index.js

@@ -2,10 +2,13 @@ import React, { useState, useEffect, useMemo } from "react";
 import { Card, CardBody, CardHeader, Col, Row, Input } from "reactstrap";
 // import { DownloadOutlined } from '@ant-design/icons';
 import axios from "../../../const/interceptorApi";
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
 import * as XLSX from "xlsx";
 import SweetAlert from "react-bootstrap-sweetalert";
 import DialogForm from "./DialogForm";
 import DialogFormProyek from "./DialogFormProyek";
+import { FileExcelOutlined, FilePdfOutlined } from "@ant-design/icons";
 import {
   NotificationContainer,
   NotificationManager,
@@ -86,6 +89,7 @@ const CreatedProyek = ({ params, ...props }) => {
 
   const [idTask, setidTask] = useState(0);
   const [dataTable, setDatatable] = useState([]);
+  console.log(`dataTable`, dataTable);
   const [search, setSearch] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPage, setTotalPage] = useState(0);
@@ -804,6 +808,63 @@ const CreatedProyek = ({ params, ...props }) => {
     }
   };
 
+  const handleExportPdf = () => {
+    const doc = new jsPDF();
+
+    const headers = [
+      ["Project Name", "Budget", "Project Type", "PM", "Time Project"],
+    ];
+    const data = dataTable.map((elt) => [
+      elt.nama,
+      `Rp. ${formatThousand(elt.rencana_biaya)}`,
+      elt.join_second_name,
+      elt.join_first_name,
+      `${moment(elt.mulai_proyek).format(format)} - ${moment(
+        elt.akhir_proyek
+      ).format(format)}`,
+    ]);
+    // Or use javascript directly:
+    doc.text(4, 15, "Project Charter");
+    autoTable(doc, {
+      startY: 20,
+      margin: { horizontal: 4 },
+      styles: { overflow: "linebreak", columnWidth: "auto", fontSize: 8 },
+      columnStyles: { text: { columnWidth: "auto" } },
+      head: headers,
+      body: data,
+    });
+
+    doc.save("table.pdf");
+    // const unit = "pt";
+    // const size = "A4"; // Use A1, A2, A3 or A4
+    // const orientation = "portrait"; // portrait or landscape
+
+    // const marginLeft = 40;
+    // const doc = new jsPDF(orientation, unit, size);
+
+    // doc.setFontSize(15);
+    // const dataPeople = [
+    //   { name: "Keanu Reeves", profession: "Actor" },
+    //   { name: "Lionel Messi", profession: "Football Player" },
+    //   { name: "Cristiano Ronaldo", profession: "Football Player" },
+    //   { name: "Jack Nicklaus", profession: "Golf Player" },
+    // ];
+    // const title = "My Awesome Report";
+    // const headers = [["NAME", "PROFESSION"]];
+
+    // const data = dataPeople.map((elt) => [elt.name, elt.profession]);
+
+    // let content = {
+    //   startY: 50,
+    //   head: headers,
+    //   body: data,
+    // };
+
+    // doc.text(title, marginLeft, 40);
+    // doc.autoTable(content);
+    // doc.save("report.pdf");
+  };
+
   const exportExcel = () => {
     const dataExcel = dataExport || [];
     const fileName = `Data ${pageName}.xlsx`;
@@ -1249,12 +1310,42 @@ const CreatedProyek = ({ params, ...props }) => {
                 </Button>
               </Tooltip>
               <Tooltip title="Export Excel">
-                <Button
+                <Popover
-                  style={{ marginLeft: "5px" }}
+                  // content={<a onClick={hide}>Close</a>}
-                  onClick={() => handleExportExcel()}
+                  title="Export"
+                  trigger="click"
+                  placement="leftBottom"
+                  content={
+                    <>
+                      <Button
+                        icon={<FileExcelOutlined />}
+                        type="link"
+                        block
+                        onClick={() => handleExportExcel()}
+                      >
+                        Export to Excel
+                      </Button>
+                      <br />
+                      <Button
+                        icon={<FilePdfOutlined />}
+                        type="link"
+                        block
+                        onClick={() => handleExportPdf()}
+                      >
+                        Export to PDF
+                      </Button>
+                    </>
+                  }
+                  // visible={visible}
+                  // onVisibleChange={handleVisibleChange}
                 >
-                  <i className="fa fa-print"></i>
+                  <Button
-                </Button>
+                    style={{ marginLeft: "5px" }}
+                    // onClick={() => handleExportExcel()}
+                  >
+                    <i className="fa fa-print"></i>
+                  </Button>
+                </Popover>
               </Tooltip>
             </Col>
           </Row>