如何使用html2canvas和JSPDF将动态网页转换为PDF

Question

我在我的网页上有一个很好的呈现样式的表格和图表，被设计为分析评估的报告。我查了很多代码片段，将html页面转换为pdf。然而，它们似乎都很难并且对代码不敏感而无法生成我的报告。所以我然后遇到 html2canvas 将我的页面转换为图像并使用jspdf转换为pdf。我的代码如下，我似乎无法做到正确。

    <script type='text/javascript' src='../js/jquery-2.1.1.js' > </script>
    <script type='text/javascript' src="../js/jsPDF-master/jspdf.js"></script>
    <script type='text/javascript' src="../js/jsPDF-master/jspdf.plugin.standard_fonts_metrics.js"></script>
    <script type='text/javascript' src="../js/jsPDF-master/jspdf.plugin.split_text_to_size.js"></script>
    <script type='text/javascript' src="../js/jsPDF-master/jspdf.plugin.from_html.js"></script>
    <script type='text/javascript' src="../js/jsPDF-master/jspdf.plugin.addhtml.js"></script>     
    <script type='text/javascript' src="../js/html2canvas-master/dist/html2canvas.js"></script>

<script language = 'JavaScript' type = 'text/javascript' >
        $(document).ready(function () {               
            var d_canvas = document.getElementById('canvas');
            var context = d_canvas.getContext('2d');
            context.moveTo(20, 20);
            context.lineTo(100, 20);
            context.fillStyle = "#999";
            context.beginPath();
            context.arc(100, 100, 75, 0, 2 * Math.PI);
            context.fill();
            context.fillStyle = "orange";
            context.fillRect(20, 20, 50, 50);
            context.font = "24px Helvetica";
            context.fillStyle = "#000";
            context.fillText("Canvas", 50, 130);


            $('#download').click(function () {
                alert();
                html2canvas($("#canvas"), {
                    onrendered: function (canvas) {
                        var imgData = canvas.toDataURL(
                                'image/png');
                        var doc = new jsPDF('p', 'mm');
                        doc.addImage(imgData, 'PNG', 10, 10);
                        doc.save('sample-file.pdf');
                    }
                });
            });
        });

        function demoPDF() {
            var doc = new jsPDF('p', 'pt', 'letter');

            var source = $('#loadPDFDiv')[0];
            doc.fromHTML(source, 15, 15, {'width': 180});
            doc.output("dataurlnewwindow");
        }
    </script> 


<div id="loadPDFDiv">
        <h4 style="padding-bottom: 5px; padding-left: 10px; display: inherit;">List of Alternatives</h4>
        <table width="100%" border="0" cellspacing="0" cellpadding="5" id="thetable" class="tablesorter">
            <thead>
                <tr>
            <div class="rowBottowBorder">
                <th width="35%" align="left" scope="col"><div style='margin-right: 10px;'><span class="style1">Alternative Name</span></div></th>
                <th width="40%" align="left" scope="col"><div style='margin-right: 10px;'><span class="style1">Alternative Group</span></div></th>
                </tr></thead>
                <tbody id="refreshTable">
                    <?php
                    try {
                        $wsdl_url = 'http://localhost:8080/Mamca/MamcaWS?WSDL';
                        $client = new SOAPClient($wsdl_url, array(
                            "features" => SOAP_SINGLE_ELEMENT_ARRAYS
                        ));
                        $params = array(
                            'projectid' => $_SESSION['projectID'],
                        );
                        $return = $client->getAlternativeListByProjectID($params);
                        if (isset($return->return)) {
                            foreach ($return->return as $eachItem) {
                                echo "<tr align='center'>";
                                echo "<td align='left' class='rowDisplay'> <a href = '#' class = 'rowNumber2'>" . $eachItem->alternativedescription . "</a></td>";
                                echo "<td align='left' class='rowDisplay'>" . $eachItem->alternativeGroup . "</td>";
                                echo "</tr>";
                            }
                        }
                    } catch (Exception $e) {
                        echo "Exception occured: " . $e;
                    }
                    ?>                                       
                </tbody>
        </table>
    </div>
    <div id="canboy"/>
    <canvas id="canvas" width="480" height="320"></canvas> 
    <button id="download">Download Pdf</button>
    <button  onclick="demoPDF();">Download</button>
</body>