[SalesForce] Getting error function not defined while it’s there

I need to call the jsPdf function, however in the console I am getting genPdf is not defined.

Here is my code–

<apex:page controller="GenerateQuoteController" standardStylesheets="false" showHeader="false">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Universal Health Fellowship</title>
       <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js">

        <apex:includeScript value="{!URLFOR($Resource.jsPdf)}" />
        <apex:includeScript value="{!URLFOR($Resource.html2canvas)}" />
        <apex:stylesheet value="{!URLFOR($Resource.bootstrap431, '/bootstrap-4.3.1-dist/css/bootstrap.min.css')}"/>

           <style>
               @media print {
                  #printPageButton {
                    display: none;
                  }
                }
            </style>
            <script type="text/javascript">
                function genPdf(){
                    html2canvas(document.body,{
                        onrendered: function(canvas){
                            var imgData = canvas.toDataURL('image/png');
                            console.log('Report Image URL: '+imgData);
                            var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high

                            doc.addImage(imgData, 'PNG', 10, 10);
                            doc.save('sample.pdf');
                        }
                    });
                }
            </script>
  </head>

  <body style="padding:20px;">
  <button type="button" id="printPageButton" class="btn btn-primary" onclick="genPdf();">Print</button>

Best Answer

After Removing html2Canvas library and changing code like below will resolve your issue.

<apex:page standardStylesheets="false" showHeader="false">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Universal Health Fellowship</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

    <script type="text/javascript">
        function genPdf(){
        html2canvas(document.body,{
            onrendered: function(canvas){
                var imgData = canvas.toDataURL('image/png');
                console.log('Report Image URL: '+imgData);
                var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high

                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample.pdf');
            }
        });
    }
    </script>
</head>

Print

Related Topic