Question

您好我正在将HTML表格导出为PDF但我无法以正确的格式获取内容。所有内容只有一个单元格。我的HTML代码是（使用jspdf.debug.js）

<span class="pdf" onclick="demoFromHTML()">PDF</span>
                <div style="width:850px;margin:0 auto;text-align:center;background-color: rgba(245, 253, 252, 0.53);padding:20px;" id="customers"> 
                    <table style="margin-bottom:20px;">
                        <colgroup>
                            <col width="45%">
                            <col width="45%">
                        </colgroup>
                        <tr>
                            <td>
                                <table class="box">
                                    <tr><td colspan="2"></td><td>Hours</td><td>Studies</td><td>Hrs/Studies</td></tr>
                                    <tr><td rowspan="3">APAC</td><td>Scripting</td><td><%=APAC_h_scri%></td><td><%=APAC_s_scri%></td><td><%=APAC_a_scri %></td></tr>
                                    <tr><td>DP</td><td><%=APAC_h_DP%></td><td><%=APAC_s_DP%></td><td><%=APAC_a_DP %></td></tr>
                                    <tr><td>Tabs</td><td><%=APAC_h_Tab%></td><td><%=APAC_s_Tab%></td><td><%=APAC_a_Tab%></td></tr>
                                </table>
                                <table class="box" style="margin-top:20px;">
                                    <tr><td colspan="2"></td><td>Hours</td><td>Studies</td><td>Hrs/Studies</td></tr>
                                    <tr><td rowspan="3">EMEA</td><td>Scripting</td><td><%=EMEA_h_scri %></td><td><%=EMEA_s_scri %></td><td><%=EMEA_a_scri %></td></tr>
                                    <tr><td>DP</td><td><%=EMEA_h_DP %></td><td><%=EMEA_s_DP %></td><td><%=EMEA_a_DP %></td></tr>
                                    <tr><td>Tabs</td><td><%=EMEA_h_Tab %></td><td><%=EMEA_s_Tab %></td><td><%=EMEA_a_Tab %></td></tr>
                                </table>
                                <table class="box" style="margin-top:15px;">
                                    <tr><td colspan="2"></td><td>Hours</td><td>Studies</td><td>Hrs/Studies</td></tr>
                                    <tr><td rowspan="3">AMS</td><td>Scripting</td><td><%=AMS_h_scri %></td><td><%=AMS_s_scri%></td><td><%=AMS_a_scri%></td></tr>
                                    <tr><td>DP</td><td><%=AMS_h_DP %></td><td><%=AMS_s_DP %></td><td><%=AMS_a_DP %></td></tr>
                                    <tr><td>Tabs</td><td><%=AMS_h_Tab %></td><td><%=AMS_s_Tab %></td><td><%=AMS_a_Tab %></td></tr>
                                </table>
                            </td>
                            <td style="padding-left:10px;">
                                <table class="box">
                                    <tr><td colspan="2"></td><td>Hours</td><td>Studies</td><td>Hrs/Studies</td></tr>
                                    <tr><td rowspan="3">Full Service Total</td><td>Scripting</td><td><%=Scripting_h%></td><td><%=Scripting_s%></td><td><%=Scripting_a%></td></tr>
                                    <tr><td>DP</td><td><%=DP_h%></td><td><%=DP_s%></td><td><%=DP_a%></td></tr>
                                    <tr><td>Tabs</td><td><%=TAB_h%></td><td><%=TAB_s%></td><td><%=TAB_a%></td></tr>
                                </table>
                                <table class="box">
                                    <tr><td colspan="2"></td><td>Hours</td><td>Studies</td><td>Hrs/Studies</td></tr>
                                    <tr><td rowspan="5">Sample Only</td><td>APAC</td><td><%=APAC_h_Sam%></td><td><%=APAC_s_Sam%></td><td><%=APAC_a_Sam%></td></tr>
                                    <tr><td>EMEA</td><td><%=EMEA_h_Sam%></td><td><%=EMEA_s_Sam%></td><td><%=EMEA_a_Sam%></td></tr>
                                    <tr><td>AMS East</td><td><%=AMS_E_h_Sam %></td><td><%=AMS_E_s_Sam %></td><td><%=AMS_E_a_Sam %></td></tr>
                                    <tr><td>AMS West</td><td><%=AMS_W_h_Sam %></td><td><%=AMS_W_s_Sam %></td><td><%=AMS_W_a_Sam %></td></tr>
                                    <tr><td>AMS</td><td><%=AMS_h_Sam %></td><td><%=AMS_s_Sam %></td><td><%=AMS_a_Sam %></td></tr>
                                </table>
                                <table class="box">
                                    <tr><td colspan="2"></td><td>Hours</td><td>Studies</td><td>Hrs/Studies</td></tr>
                                    <tr><td>Sample Only Total</td><td>Sample Only</td><td><%=Sample_h%></td><td><%=Sample_s%></td><td><%=Sample_a%></td></tr>
                                </table>
                            </td>
                        </tr>
                    </table>  
                    <div class="clearfix"></div>

                </div>

和java脚本代码是

<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];

            alert(source);

            // 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>

得到如下图像

将HTML表导出为PDF而不是获取内容

0 个答案: