added pdf export object

src/components/cipp/PdfButton.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react'
+import { CButton } from '@coreui/react'
+import jsPDF from 'jspdf'
+import 'jspdf-autotable'
+import PropTypes from 'prop-types'
+
+function ExportPDFButton(props) {
+  const exportPDF = (pdfdata, pdfheaders, pdfsize = 'A4', reportname) => {
+    const unit = 'pt'
+    console.log(pdfdata)
+    const size = pdfsize // Use A1, A2, A3 or A4
+    const orientation = 'landscape' // portrait or landscape
+
+    const marginLeft = 40
+    const doc = new jsPDF(orientation, unit, size)
+    const pdfdatafinal = pdfdata.map((pdfdata) => pdfheaders)
+
+    doc.setFontSize(10)
+
+    const title = reportname
+    let content = {
+      head: [pdfheaders],
+      body: pdfdata,
+      theme: 'grid',
+    }
+
+    doc.text(title, marginLeft, 40)
+    doc.autoTable(pdfheaders, pdfdata)
+    doc.save(reportname + '.pdf')
+  }
+
+  return (
+    <CButton
+      onClick={() => exportPDF(props.pdfdata, props.pdfheaders, props.pdfsize, props.reportname)}
+    >
+      PDF
+    </CButton>
+  )
+}
+export default ExportPDFButton
+
+ExportPDFButton.propTypes = {
+  pdfdata: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.array]),
+  pdfheaders: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  pdfsize: PropTypes.oneOf(['A1', 'A2', 'A3', 'A4']),
+  reportname: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]),
+}

src/views/identity/reports/MFAReport.js

@@ -8,7 +8,7 @@ import BootstrapTable from 'react-bootstrap-table-next'
 import paginationFactory from 'react-bootstrap-table2-paginator'
 import { Loading } from '../../../components'
 import CellBoolean from '../../../components/cipp/CellBoolean'
-
+import ExportPDFButton from '../../../components/cipp/PdfButton'
 const { SearchBar } = Search
 const { ExportCSVButton } = CSVExport
 const pagination = paginationFactory()
@@ -101,6 +101,7 @@ const MFAReport = () => {
       load()
     }
   }, [])
+  const headers = columns.map(({ dataField }) => dataField)
 
   return (
     <div className="bg-white rounded p-5">
@@ -125,15 +126,21 @@ const MFAReport = () => {
                 <ExportCSVButton {...props.csvProps}>
                   <CButton>CSV</CButton>
                 </ExportCSVButton>
+                <ExportPDFButton
+                  pdfdata={mfa.report}
+                  pdfheaders={headers}
+                  pdfsize="A4"
+                  reportname="MFA Report"
+                ></ExportPDFButton>
                 <hr />
                 {/*eslint-disable */}
-              <BootstrapTable
-                {...props.baseProps}
-                pagination={pagination}
-                striped
-                wrapperClasses="table-responsive"
-              />
-              {/*eslint-enable */}
+                <BootstrapTable
+                  {...props.baseProps}
+                  pagination={pagination}
+                  striped
+                  wrapperClasses="table-responsive"
+                />
+                {/*eslint-enable */}
               </div>
             )}
           </ToolkitProvider>