jquery – 如何使用Jspdf将Html表数据导出为PDF

前端之家收集整理的这篇文章主要介绍了jquery – 如何使用Jspdf将Html表数据导出为PDF前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何将HTML页面中的表导出为PDF.我已经做了一些样本数据,但是我无法将HTML表格列表加载到PDF中,请帮助我将表格加载到PDF中.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>html2canvas example</title>
        <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>    
        <script type="text/javascript" src="js/jspdf.js"></script>    
        <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>    

        <script type="text/javascript">
            $(document).ready(function() { 
                var specialElementHandlers = {
                    '#editor': function(element,renderer) { return true; }
                };

                $('#cmd').click(function() {
                    var doc = new jsPDF();

                    doc.fromHTML($('#target').html(),15,{
                        'width': 170,'elementHandlers': specialElementHandlers
                    });

                    doc.save('sample-file.pdf');
                });  
            });
        </script>
    </head>
    <body id="target">
        <div id="content">
            <h3>Hello,this is a H3 tag</h3>

            <a class="upload">Upload to Imgur</a>    
            <h2>this is <b>bold</b> <span style="color:red">red</span></h2>

            <table border="1">
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
                <tr>
                    <td>row 1,cell 1</td>
                    <td>row 1,cell 2</td>
                </tr>
                <tr>
                    <td>row 2,cell 1</td>
                    <td>row 2,cell 2</td>
                </tr>
            </table>
        </div>

        <button id="cmd">generate PDF</button>
    </body>
</html>

http://jsfiddle.net/y2b7Q/327/

解决方法

一个很好的选择是 AutoTable(a Table plugin for jsPDF),它包括主题,rowspan,colspan,从html提取数据,与json工作,你也可以个性化你的标题,并使他们的水平线. Here是一个演示.

原文链接:https://www.f2er.com/jquery/180588.html

猜你在找的jQuery相关文章