使用jsPDF创建格式化表格数据的pdf

Question

我能够使用以下脚本从HTML表格生成PDF文件： 但是，我得到的所有列数据都是逐行显示的。

请帮助我以表格格式（具有列边框、边距或填充、标头）在此脚本中生成PDF文件。

我使用了jsPDF库脚本来将HTML表格生成为PDF。

 var pdf = new jsPDF('p', 'pt', 'letter')   
    , source = $('#TableId')[0] 
    , specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function(element, renderer){           
            return true
        }
    }

    , margins = {
             top: 20,
             bottom: 20,
             left: 30,
             width: 922
         };


    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) {          
          pdf.save('Test.pdf');
        },
        margins
    )

编辑：

我也尝试了下面这个示例函数，但是我只得到了一个空的pdf文件。

function exportTabletoPdf()
{
    var doc = new jsPDF('p','pt', 'a4', true);
    var header = [1,2,3,4];
    doc.table(10, 10, $('#test').get(0), header, {
    left:10,
    top:10,
    bottom: 10,
    width: 170,
    autoSize:false,
    printHeaders: true
    });
    doc.save('sample-file.pdf');
}

- user3428816

---

我的另一篇帖子可能会对你有所帮助：在Angular2中如何将HTML转换为PDF。 - Leonardo V

Answer 1

我花了很多时间寻找一个好的表格呈现方式，然后我发现了这个插件 (https://github.com/simonbengtsson/jsPDF-AutoTable)，它非常好用，包含主题、rowspan、colspan、从HTML提取数据，与JSON一起使用，你还可以个性化你的标题并使它们水平。

下面的图像是一个例子：

- Oscar Acevedo

---

非常好！感谢您的贡献！ - Cameron Tinker

非常感谢！现在使用这个插件可以了！ - Fernando Torres

非常棒的插件。感谢分享。 - isaacsan 123

Answer 2

你需要使用类似 -- doc.setLineWidth(2); 的方式来设置线性边框。请查看以下示例代码： 如何使用jsPDF设置生成pdf的列宽

- Vinu

Answer 3

导出包括纯文本和表格数据的HTML div内容，使用jspdf 包含脚本https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js

function download_DIVPdf(divid) {
    var pdf = new jsPDF('p', 'pt', 'letter');
    var pdf_name = 'PostMode-'+om+'.pdf';
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    htmlsource = $('#'+divid)[0];

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

    pdf.fromHTML(
    htmlsource, // 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) {                

        pdf.save(pdf_name);
    }, margins);
}

- Lokesh Das

---

请不要忘记包含脚本 https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"。 - Lokesh Das

Answer 4

也许是因为您的头部是一个数字数组，而不是应该是字符串数组。尝试使用这个基本示例，它可以正常工作：

var doc    = new jsPDF();
var header = ['1', '2', '3', '4'];
var data   = [{1: '1', 2: '2', 3: '3', 4: '4'}];
var config = {
    autoSize     : false,
    printHeaders : true
}

doc.table(10, 10, data, header, config);
doc.output('dataurlnewwindow');

- paulalexandru

Answer 5

$(".gridview td").each(function () {
      var value = $(this).html();
      doc.setFontSize(8);

      if (count == 1) {
          if (height > 278) {
              doc.rect(10, inc, 24, 8);
              doc.rect(34, inc, 111, 8);
              doc.rect(145, inc, 15, 8);
              doc.rect(160, inc, 20, 8);
              doc.rect(180, inc, 23, 8);

              doc.addPage(focus);
              doc.setLineWidth(0.5);
              inc = 15;
              height = 18;
          }


          doc.rect(10, inc, 24, 8);
          doc.text(value, 11, height);         
     }
     if (count == 2) {
          doc.rect(34, inc, 111, 8);
          var splitdesc = doc.splitTextToSize(value, 100);
          doc.text(splitdesc, 35, height);
     }
     if (count == 3) {
         doc.rect(145, inc, 15, 8);
         doc.text(value, 147, height);
         qty = value;
     }
     if (count == 4) {
        doc.rect(160, inc, 20, 8);
        doc.text(value, 163, height);

        amt = value;
     }
     if (count == 5) {
        doc.rect(180, inc, 23, 8);

        tot = parseInt(qty) * parseFloat(amt);
        doc.text("" + tot, 182, height);
        count = 0;

        height = height + 8;
        netamt = netamt + parseFloat(tot);

        inc = parseInt(inc) + 8;
        doc.rect(10, inc, 24, 8);
        doc.rect(34, inc, 111, 8);
        doc.rect(145, inc, 15, 8);
        doc.rect(160, inc, 20, 8);
        doc.rect(180, inc, 23, 8);
    }
    count = count + 1;
});

- Vijay M

Answer 6

尝试从此方法中删除最后一个参数"true":

var doc = new jsPDF('p','pt', 'a4', true);

- Ali Mohammad Fawzi

---

文档中说布尔值是 putOnlyusedFonts 选项，该选项仅包括在 PDF 中使用的字体。 - MoralCode