codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Simple PDF – Minimal Code

    8th November 2018

    Jquery - Tricks

    jquery icon

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
     
    <div id="customers">
    <div class="table-responsive">
    <table id="tbl" class="table table-hover">
    <thead>
    <tr>
    <th style="background-color: #928989; color; white;">Dog</th>
    <th style="background-color: #928989; color; white;">Cat</th>
    <th style="background-color: #928989; color; white;">Fish</th>
    <th style="background-color: #928989; color; white;">Kangaroo</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Tree</td>
    <td>Building</td>
    <td>Boat</td>
    <td>Shoe</td>
    </tr>
    <tr ng-repeat-end="" class="table table-bordered table-hover">
    <td style="background-color: #80A3C1;">Dave</td>
    <td style="background-color: #80A3C1;">Mike</td>
    <td style="background-color: #80A3C1;">Carl</td>
    <td style="background-color: #80A3C1;">Barry</td>
    </tr>
                 <tr>
                 <td>STUFFID1</td>
                 <td>10</td>
                 <td>APPLE</td>
                 <td>BOOM</td>
                 </tr>
                      <tr>
                        <td>STUFFID2</td>
                 <td>40</td>
                 <td>SONY</td>
                 <td>BREAK</td>
                      </tr>
                 <tr ng-repeat-end=""></tr>
              
            
    </tbody>
    </table>
    </div>
    </div>
    <button onclick="javascript:demoFromHTML();">PDF</button>
     
     
    <script>
    // $(document).ready(function(){
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#customers')[0];
     
        // we support special element handlers. Register them with jQuery-style
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 10,
            width: 700
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },
     
        function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
        }, margins);
    }
     
     
     
    // });
    </script>