如何使用Jspdf将Html Tables数据导出为PDF

时间：2013-11-06 09:09:36

标签： jquery html jspdf

如何将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, 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/

8 个答案:

答案 0 :(得分：14)

一个很好的选择是AutoTable(a Table plugin for jsPDF)，它包括主题，rowspan，colspan，从html中提取数据，与json一起使用，你也可以个性化你的标题并使它们成为横向。 Here是一个演示。

enter image description here

答案 1 :(得分：7)

它需要一个tablePlugin for jspdf对象数组，并将该数据显示为表格。您可以在代码中进行少量更改来设置文本和标题的样式。它是开源的，也有开始使用的示例。

答案 2 :(得分：6)

以下是我认为可以帮助您的示例

<!DOCTYPE html>
<html>
<head>
<script src="js/min.js"></script>
<script src="js/pdf.js"></script>
<script>
    $(function(){
         var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

   $('#cmd').click(function () {

        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p','pt', 'a4', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
            console.debug(row);
            $.each(row, function (j, cell){
                doc.cell(10, 50,120, 50, cell, i);  // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
            })
        })


        doc.save('sample-file.pdf');
    });
    function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }


    // go through cells
    for (var i=0; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}
});
</script>
</head>
<body>
<div id="table">
<table id="StudentInfoListTable">
                <thead>
                    <tr>    
                        <th>Name</th>
                        <th>Email</th>
                        <th>Track</th>
                        <th>S.S.C Roll</th>
                        <th>S.S.C Division</th>
                        <th>H.S.C Roll</th>
                        <th>H.S.C Division</th>
                        <th>District</th>

                    </tr>
                </thead>
                <tbody>

                        <tr>
                            <td>alimon  </td>
                            <td>Email</td>
                            <td>1</td>
                            <td>2222</td>
                            <td>as</td>
                            <td>3333</td>
                            <td>dd</td>
                            <td>33</td>
                        </tr>               
                </tbody>
            </table>
<button id="cmd">Submit</button>
</body>
</html>

这里输出

enter image description here

答案 3 :(得分：4)

不幸的是，这是不可能的。

jsPDF不支持在 fromHTML 方法中导出图像和表格。在jsPDF v0.9.0 rc2

中

答案 4 :(得分：3)

只需按照以下步骤操作即可确保生成pdf文件 

    <html>
    <head>

    <title>Exporting table data to pdf Example</title>


    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="js/jspdf.js"></script>
    <script type="text/javascript" src="js/from_html.js"></script>
    <script type="text/javascript" src="js/split_text_to_size.js"></script>
    <script type="text/javascript" src="js/standard_fonts_metrics.js"></script>
    <script type="text/javascript" src="js/cell.js"></script>
    <script type="text/javascript" src="js/FileSaver.js"></script>


    <script type="text/javascript">
        $(document).ready(function() {

            $("#exportpdf").click(function() {
                var pdf = new jsPDF('p', 'pt', 'ledger');
                // source can be HTML-formatted string, or a reference
                // to an actual DOM element from which the text will be scraped.
                source = $('#yourTableIdName')[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 : 60,
                    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('fileNameOfGeneretedPdf.pdf');
                }, margins);
            });

        });
    </script>
    </head>
    <body>
    <div id="yourTableIdName">
        <table style="width: 1020px;font-size: 12px;" border="1">
            <thead>
                <tr align="left">
                    <th>Country</th>
                    <th>State</th>
                    <th>City</th>
                </tr>
            </thead>


            <tbody>

                <tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr>
<tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr>
            </tbody>
        </table></div>

        <input type="button" id="exportpdf" value="Download PDF">


    </body>

    </html>

输出：

Html文件输出： html output

Pdf文件输出： pdf output

答案 5 :(得分：2)

＆＃34; How to properly use jsPDF library＆＃34;可能会给你更多你需要的东西。该表不能正确呈现（no css, per this answer），但您可以使用jquery对html表进行一些解析，并自己手动设置样式。

另一种选择是使用带有HTML2Canvas或Casper.js的HTML屏幕截图。

修改

这是使用jspdf单元插件的基本示例。它使用jquery和HTML Table to JSON中的tableToJson()函数。

确保包含Deflate lib（两个js文件）和jspdf.plugin.cell.js。

var table = tableToJson($('#table-id').get(0))
var doc = new jsPDF('p', 'pt', 'a4', true);
doc.cellInitialize();
$.each(table, function (i, row){
  $.each(row, function (j, cell){
    doc.cell(10, 200, 100, 20, cell, i);
  })
})
doc.save()

答案 6 :(得分：1)

尝试放

Sub printErrorCode()

Dim errorType, errorCode As Variant 'define two variant variable to store errors and codes
Dim errorPosition As Integer 'define errorPosition which will return the position of the searched string

With ThisWorkbook.Sheets("YourSheetName") 'In my example I worked with a single sheet so I will avoid specifying the workbook and the sheet in every line

errorType = .Range("ListOfErrorsRange").Value 'store possible error types
errorCode = .Range("ListOfErrorCodesRange").Value 'store associated codes

For i = LBound(errorType) To UBound(errorType) 'from the first error type to the last
    errorPosition = InStr(1, .Range("YourStringRange"), errorType(i, 1), vbTextCompare) 'return the position of errorType String in YourRange string if found, or 0 if not found
    If errorPosition <> 0 Then 'if errorPosition <>0 it found the string
        .Range("YourStringRange").Offset(0,1).Value = errorCode(i, 1) 'if errorType string found return corresponding errorCode
        Exit Sub 'exit the routine
    End If
Next i

MsgBox "Error Not Found In List" 'if errorPosition = 0 for all i, then the Error was not on the list of errors

End With

End Sub

而不是

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

答案 7 :(得分：0)

我使用 Datatable JS插件来实现将html表数据导出为各种格式的目的。根据我的经验，它使用最少的编码非常快速，易于使用和配置。

以下是使用datatable插件的示例jquery调用，#example是您的表ID 

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

请在以下数据表参考链接中找到完整示例：

https://datatables.net/extensions/buttons/examples/html5/simple.html

这是它配置后的方式（来自参考站点）： enter image description here

您需要在html中包含以下库引用（有些可以在上面的参考链接中找到）

jquery-1.12.3.js
jquery.dataTables.min.js
dataTables.buttons.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js
相关问题
最新问题