I try to generate pdf from html using jsPdf and html2canvas.

But when my div is not visible I get error:

IndexSizeError: Index or size is negative or greater than the allowed amount and cant create pdf.

If my div is visible all is OK.

How can I solve my problem? How can create pdf from hidden html?

I tried did something like it:

$("#btn").click(function() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.addHTML($('#testDiv')[0], function() {
    pdf.save('PdfFile.pdf');
  });
});

#testDiv {
  position: absolute;
  left: -9999px;
}

<script src=".1.1/jquery.min.js"></script>
<div id="testDiv" style="display: none">
  <p>Some text to pdf</p>
</div>

I try to generate pdf from html using jsPdf and html2canvas.

But when my div is not visible I get error:

IndexSizeError: Index or size is negative or greater than the allowed amount and cant create pdf.

If my div is visible all is OK.

How can I solve my problem? How can create pdf from hidden html?

I tried did something like it:

$("#btn").click(function() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.addHTML($('#testDiv')[0], function() {
    pdf.save('PdfFile.pdf');
  });
});

#testDiv {
  position: absolute;
  left: -9999px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testDiv" style="display: none">
  <p>Some text to pdf</p>
</div>

But I got pdf with black area and that's all.

ADD MY CODE WITH CSS:

    <div id="template_invoice">
    <div id="first_head">
        <div id="logo_invoice">
            <img src="logo.PNG" width="200px">
        </div>
        <div id="main_header_info">hth</div>
    </div>
    <div class="clearFix"></div>
</div>

<style>
    html{
        background: #fff !important;
    }
    #first_head,#second_head,#content_invoice{
        width: 100%;
    }
    #logo_invoice, #main_header_info,#lead_address,#lead_invoice_info{
        width: 50%;
        float:left;
    }
    .clearFix{
        float:none;
        clear:both;
    }
    #second_head{
        margin-top: 100px;
    }
    #template_invoice{
        margin: 0 auto;
        width: 1170px;
    }
    #template_invoice{
        visibility: hidden;
        width: 0px;
        height: 0px;
    }
   </style>

  <script>


function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        source = $('#template_invoice')[0];
        specialElementHandlers = {
            '#bypassme': function (element, renderer) {
                return true
            }
        };
        margins = {
            top: 10,
            bottom: 10,
            left: 10
        };
        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) {
                    pdf.save('Test.pdf');
                }, margins);
    }
</script>

• javascript
• jquery
• html
• css
• jspdf

Share Improve this question Follow edited Aug 30, 2017 at 13:40 Ololo Ololo asked Aug 30, 2017 at 12:15 Ololo OloloOlolo Ololo 9122 gold badges33 silver badges55 bronze badges 2

• Set opacity to 0 or visibility hidden instead of display none. – Swanand Taware Commented Aug 30, 2017 at 12:20
• It does not fit because on page remained spaces:clip2net./s/3Nl398y – Ololo Ololo Commented Aug 30, 2017 at 12:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try this CSS:

#testDiv{
  visibility:hidden;
  height:0px;
}

Hope it will work.

I tried with this and it works.

Script

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 pound) 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: 40,
        width: 522
    };
    // 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);
}

HTML

<div id="customers">
    <table id="tab_customers" class="table table-striped">
        <colgroup>
            <col width="20%">
                <col width="20%">
                    <col width="20%">
                        <col width="20%">
        </colgroup>
        <thead>
            <tr class='warning'>
                <th>Country</th>
                <th>Population</th>
                <th>Date</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chinna</td>
                <td>1,363,480,000</td>
                <td>March 24, 2014</td>
                <td>19.1</td>
            </tr>
            <tr>
                <td>India</td>
                <td>1,241,900,000</td>
                <td>March 24, 2014</td>
                <td>17.4</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>317,746,000</td>
                <td>March 24, 2014</td>
                <td>4.44</td>
            </tr>
            <tr>
                <td>Indonesia</td>
                <td>249,866,000</td>
                <td>July 1, 2013</td>
                <td>3.49</td>
            </tr>
            <tr>
                <td>Brazil</td>
                <td>201,032,714</td>
                <td>July 1, 2013</td>
                <td>2.81</td>
            </tr>
        </tbody>
    </table>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>

CSS

#customers{
  visibility:hidden;
  height:0px;
}

Just Do the following trick:-

#some_selector {
  visibility:hidden;
  height:0;
  overflow: hidden;
}