表格后的格式内容(jsPDF autotable)

时间:2017-11-17 11:48:48

标签: jspdf jspdf-autotable

我想在使用jsPDF autotable创建的pdf文件中的表之后添加内容。

我的代码:

    $('#printBtn').on('click', function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    var res = pdf.autoTableHtmlToJson(document.getElementById("tablePrint"));

    var anfang = "Anfang";
    pdf.text(anfang, 14, 30);

    pdf.autoTable(res.columns, res.data, {
        theme : 'plain',
        styles: {
            fontSize: 12
        },
        showHeader: 'never',
        createdCell: function(cell, data) {
            var tdElement = cell.raw;
            if (tdElement.classList.contains('hrow')) {
                cell.styles.fontStyle = 'bold';
            }
        }
    });

    var ende = $('#ende_text').text();
    pdf.text(ende, 0, 12);

    pdf.save("test.pdf");
});

我的问题是代码没有格式化。 jsPDF忽略了标签和其他所有内容。

我如何解决这个问题或者我能做些什么呢?文本有换行符而不是溢出?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

             margins={
                     top=50,
                     left=30,
                     bottom=50,
                     width=520
                    }
              var pdf = new jsPDF("p", "pt","a4");

              var res = pdf.autoTableHtmlToJson(document.getElementById("table2"));

              pdf.autoTable(res.columns, res.data,{
              margin: { left: 30,bottom:100},
              startY: 30,  pageBreak: 'always',              
              styles: {overflow: 'linebreak', columnWidth: 'wrap', font: 'arial',  
              cellPadding: 8, overflowColumns: 'linebreak'}
                  });

              pdf.fromHTML($("#editor1").get(0), 30, pdf.autoTableEndPosY() + 20, {
              'width': margins.width
              },function(dispose)
                   {
              var iframe = document.createElement('iframe');
              iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:40%; padding:20px;');
              document.body.appendChild(iframe);
              iframe.src = pdf.output('datauristring');
              //pdf.save('name.pdf');
              },
              margins);

iam使用最新版本的jspdf.min.js和jspdf.autotable.js

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>