jsPdf从隐藏的html生成pdf

Question

我尝试使用jsPdf和html2canvas从html生成pdf。

但当我的div不可见时，我得到错误：

IndexSizeError：索引或大小为负数或大于允许的数量，并且无法创建pdf。

如果我的div可见则一切正常。

我怎样才能解决我的问题？如何从隐藏的HTML创建pdf？

我试过做过类似的事情：

$("#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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testDiv" style="display: none">
  <p>Some text to pdf</p>
</div>

但我得到了带黑色区域的pdf，就是这样。

使用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>

Answer 1

试试这个CSS：

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

希望它会奏效。

我试过这个并且它有效。

脚本

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: 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;
}

Answer 2

只需执行以下技巧： -

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