blocks|key|4635013|text|以下是工作示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4635014|在头部|4635015|<script+type="text/javascript"+src="jspdf.debug.js"></script>|code-block|syntax|javascript|4635016|脚本：|4635017|<script+type="text/javascript">
++++++++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);
++++++++}
++++</script>|4635018|和表：|4635019|<div+id="customers">
++++++++<table+id="tab_customers"+class="table+table-striped"+>
++++++++++++<colgroup>
++++++++++++++++<col+width="20%25">
++++++++++++++++<col+width="20%25">
++++++++++++++++<col+width="20%25">
++++++++++++++++<col+width="20%25">
++++++++++++</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>|4635020|和按钮来运行：|4635021|<button+onclick="javascript:demoFromHTML()">PDF</button>|4635022|和在线工作示例：|4635023|tabel+to+pdf+jspdf|offset|length|4635024|或者试试这个：HTML+Table+Export|4635025|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xzZ7n/7806/|1|http://ngiriraj.com/pages/htmltable_export/demo.php^0|0|0|0|0|0|0|0|0|0|0|0|I|0|0|7|H|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1F|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@$Y|1N|Z|1O|1|1P]]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@$Y|1R|Z|1S|1|1T]]|A|$]]|$1|12|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]]]

<p>Here is working example:</p>

<p>in head</p>

<pre><code>&lt;script type="text/javascript" src="jspdf.debug.js"&gt;&lt;/script&gt;
</code></pre>

<p>script:</p>

<pre><code>&lt;script type="text/javascript"&gt;
        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);
        }
    &lt;/script&gt;
</code></pre>

<p>and table:</p>

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

<p>and button to run:</p>

<pre><code>&lt;button onclick="javascript:demoFromHTML()"&gt;PDF&lt;/button&gt;
</code></pre>

<p>and working example online:</p>

<p><a href="http://jsfiddle.net/xzZ7n/7806/" rel="noreferrer">tabel to pdf jspdf</a></p>

<p>or try this: <a href="http://ngiriraj.com/pages/htmltable_export/demo.php" rel="noreferrer">HTML Table Export</a></p>


blocks|key|4635057|text|您也可以使用jsPDF-AutoTable插件。您可以查看使用以下代码的演示here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4635058|var+doc+=+new+jsPDF('p',+'pt');
var+elem+=+document.getElementById("basic-table");
var+res+=+doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns,+res.data);
doc.save("table.pdf");|code-block|syntax|javascript|4635059|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/simonbengtsson/jsPDF-AutoTable|1|https://simonbengtsson.github.io/jsPDF-AutoTable/#html^0|6|F|0|12|4|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<p>You can also use the <a href="https://github.com/simonbengtsson/jsPDF-AutoTable">jsPDF-AutoTable</a> plugin. You can check out a demo <a href="https://simonbengtsson.github.io/jsPDF-AutoTable/#html">here</a> that uses the following code.</p>

<pre><code>var doc = new jsPDF('p', 'pt');
var elem = document.getElementById("basic-table");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns, res.data);
doc.save("table.pdf");
</code></pre>


blocks|key|128878|text|使用get(0)而不是html()。换句话说，替换|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|128879|doc.fromHTML($('#htmlTableId').html(),+15,+15,+{
++++'width':+170,'elementHandlers':+specialElementHandlers
});|code-block|syntax|javascript|128880|使用|128881|doc.fromHTML($('#htmlTableId').get(0),+15,+15,+{
++++'width':+170,'elementHandlers':+specialElementHandlers
});|128882|entityMap^0|2|6|B|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>Use <code>get(0)</code> instead of <code>html()</code>.  In other words, replace</p>

<pre><code>doc.fromHTML($('#htmlTableId').html(), 15, 15, {
    'width': 170,'elementHandlers': specialElementHandlers
});
</code></pre>

<p>with</p>

<pre><code>doc.fromHTML($('#htmlTableId').get(0), 15, 15, {
    'width': 170,'elementHandlers': specialElementHandlers
});
</code></pre>


<p>I need to export the HTML table to pdf file using jspdf. I tried the below code but it displays the blank/empty output in pdf file. Any suggestions or sample code for this would be helpful.
`</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function demo1() {
        $(function () {
            var specialElementHandlers = {
                '#editor': function (element,renderer) {
                    return true;
                }
            };
         $('#cmd').click(function () {
                var doc = new jsPDF();
                doc.fromHTML($('#htmlTableId').html(), 15, 15, {
                    'width': 170,'elementHandlers': specialElementHandlers
                });
                doc.save('sample-file.pdf');
            });  
        }); 
    }
&lt;/script&gt;
`
</code></pre>


Export HTML table to pdf using jspdf

我需要使用jspdf将HTML表导出到pdf文件。我尝试了下面的代码，但它在pdf文件中显示空白/空输出。这方面的任何建议或示例代码都会很有帮助。`<script type="text/javascript">    function demo1() {        $(function () {          ...

问使用jspdf将HTML表导出为pdf
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jspdf将HTML表导出为pdfEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jspdf将HTML表导出为pdf
EN