Generate PDF from HTML using jQuery

lingers
 
on Jun 19, 2021 05:16 AM
Sample_737404.zip
2257 Views

I want a pdf copy of the page, that is on pdf button click a pdf copy of the page will be generated

my code below but the pdf page refused to show or be downloaded.

Please help.

<html>
<title></title
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<style type="text/css">
   h3
    {
        border:1px solid black;
    }
        .content-template{
        display:none
    }
</style>
<script type="text/javascript">
$('.cmd').click(function () { 
  var pdf = new jsPDF();
  var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
  };
  var $addr = $(this).closest('.res').find('.content');
  var $temp = $('.content-template');
  $temp.find('h3').text($addr.find('h3').text());
  pdf.fromHTML($temp.html(), 15, 15, {
        'width': 170,
        'elementHandlers':specialElementHandlers
        }
  );
  pdf.save('sample-file.pdf');
});
</script>
</head>
<body>
<div id="main">
    <div class="res">
        <div class="content">
            <h3>Sample1 h3 tag</h3>
        </div>
        <button class="cmd">Generate PDF</button>
    </div>
    <div class="res">
        <div class="content">
            <h3>Sample2 h3 tag</h3>
        </div>
        <button class="cmd">Generate PDF</button>
    </div>
    <div class="res">
        <div class="content">
            <h3>Sample3 h3 tag</h3>
        </div>
        <button class="cmd">Generate PDF</button>
    </div>
</div>
<div class="content-template">
  <h3>Sample2 h3 tag</h3>
  <p>Sample pararaph €€€€€</p>
</div> 
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 01, 2021 06:45 AM

Refer below code.

HTML

<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <style type="text/css">
        h3 {
            border: 1px solid black;
        }

        .content-template {
            display: none
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.cmd').click(function () {
                debugger;
                var pdf = new jsPDF();
                var specialElementHandlers = {
                    '#editor': function (element, renderer) {
                        return true;
                    }
                };
                var $addr = $(this).closest('.res').find('.content');
                var $temp = $('.content-template');
                $temp.find('h3').text($addr.find('h3').text());
                pdf.fromHTML($temp.html(), 15, 15, {
                    'width': 170,
                    'elementHandlers': specialElementHandlers
                });
                pdf.save('sample-file.pdf');
            });
        });
    </script>
    <div id="main">
        <div class="res">
            <div class="content">
                <h3>Sample1 h3 tag</h3>
            </div>
            <button type="button" class="cmd">Generate PDF</button>
        </div>
        <div class="res">
            <div class="content">
                <h3>Sample2 h3 tag</h3>
            </div>
            <button type="button" class="cmd">Generate PDF</button>
        </div>
        <div class="res">
            <div class="content">
                <h3>Sample3 h3 tag</h3>
            </div>
            <button type="button" class="cmd">Generate PDF</button>
        </div>
    </div>
    <div class="content-template">
        <h3>Sample2 h3 tag</h3>
        <p>Sample pararaph €€€€€</p>
    </div>
</body>
</html>

Demo