How to run report on PDF

Video Link : https://youtu.be/u9Ovpq2m96U

Table

CREATE TABLE  "BOARD_MEMBER" 
   ( "ID" NUMBER(4,0), 
 "NAME" VARCHAR2(50), 
 "DESIGNATION" VARCHAR2(50), 
 "IMAGE" BLOB, 
 "DESCRIPTION" VARCHAR2(200), 
 "FB_LINK" VARCHAR2(100), 
 "TWITTER_LINK" VARCHAR2(100), 
 "LINKEDIN" VARCHAR2(100), 
 "GMAIL_LINK" VARCHAR2(100)
   ) ;
 

JavaScript

<script type="text/javascript">

        function Export() {

            html2canvas(document.getElementById("PDF"), {

                onrendered: function (canvas) {

                    var data = canvas.toDataURL();

                    var docDefinition = {

                        content: [{

                            image: data,

                            width: 500

                        }]

                    };

                    pdfMake.createPdf(docDefinition).download("Table.pdf");

                }

            });

        }

    </script>

PL Report

--- CSS

htp.p('<style>
#PDF {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#PDF td, #PDF th {
  border: 1px solid #ddd;
  padding: 8px;
}

#PDF tr:nth-child(even){background-color: #f2f2f2;}

#PDF tr:hover {background-color: #ddd;}

#PDF th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>');

--- Table Header
htp.p('<table id="PDF">
  <tr>
    <th>SL</th>
    <th>Name</th>
    <th>Designation</th>
      <th>Description</th>
  </tr>');
  --- Query
  FOR X IN (SELECT ROWNUM SL,NAME,DESIGNATION,DESCRIPTION FROM BOARD_MEMBER)

  --- USING LOOP FOR Multiple data
  LOOP
  --- Table Data
  htp.p('<tr>
    <td>'||X.SL||'</td>
    <td>'||X.NAME||'</td>
    <td>'||X.DESIGNATION||'</td>
<td>'||X.DESCRIPTION||'</td>
  </tr>');
    end loop;
  htp.p('</table>');

--- Button
  htp.p('<input type="button" id="btnExport" value="Export" onclick="Export()" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>');

Classic Report



Static ID=PDF

Header Text

<input type="button" id="btnExport" value="Export" onclick="Export()" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>




IR Report

Static ID=PDF

Header Text

<input type="button" id="btnExport" value="Export" onclick="Export()" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>