如何使用jsPDF设置生成pdf的列宽 [英] How to set column width for generating pdf using jsPDF

问题描述

我可以使用jsPDF lib来生成PDF。

I got struck for the last two days, to set a column width for generating PDF using jsPDF.

我最近两天使用jsPDF设置生成PDF的列宽。从HTML表格，但我得到重叠列的问题。因为我想在表格中显示20列。我已将选项纵向更改为横向，并在导出脚本选项以及html表格宽度中设置宽度5000.

I am able to generate pdf using jsPDF lib from html table, but i am getting problem of overlapping columns. Because I want to display 20 columns in the sheet. I have changed the options portrait to landscape and set the width 5000 in exporting script options as well as html table width.

请帮助我设置pdf列宽jsPDF。谢谢

Please help me, to set the pdf column width from jsPDF. Thanks

推荐答案

我4天前遇到过同样的问题，并且能够修复它。我为您提供了以下示例代码，理解..

I had same problem 4 days back and was able to fix it.. I have provided sample code below for you to understand..

我假设需要导出一个html表格（下面提到的table1，有3行或更多行）为PDF格式。我们将为其设置单元格/列的宽度以及这些3 +行的字体和字体类型。

I am assuming that the requirement is to export a html table (mentioned below as table1, that has 3 or more rows) to PDF format. To which we will be setting cell/column width and additionally font and font types for those 3+ rows..

第一行是标题 - 所以应用粗体。我为第二行和第三行应用了不同的样式来理解可用的样式。如果您想要应用不同的列宽，对于每一列 - 您也可以这样做。

First row would be Header - so bold is applied.. I have applied different styles for 2nd and 3rd rows for understanding styles available.. If you want to apply different column width, for each of the columns - you can do that as well..

希望以下代码可读性和自我解释性。如果您有任何问题，请告知我们。

Hope the following code is readable and self explanatory. Let me know if you have any questions

 $(document).on("click", "#btnExportToPDF", function () { 

        var table1 = 
        tableToJson($('#table1').get(0)),
        cellWidth = 35,
        rowCount = 0,
        cellContents,
        leftMargin = 2,
        topMargin = 12,
        topMarginTable = 55,
        headerRowHeight = 13,
        rowHeight = 9,

         l = {
         orientation: 'l',
         unit: 'mm',
         format: 'a3',
         compress: true,
         fontSize: 8,
         lineHeight: 1,
         autoSize: false,
         printHeaders: true
     };

    var doc = new jsPDF(l, '', '', '');

    doc.setProperties({
        title: 'Test PDF Document',
        subject: 'This is the subject',
        author: 'author',
        keywords: 'generated, javascript, web 2.0, ajax',
        creator: 'author'
    });

    doc.cellInitialize();

   $.each(table1, function (i, row)
    {

        rowCount++;

        $.each(row, function (j, cellContent) {

            if (rowCount == 1) {
                doc.margins = 1;
                doc.setFont("helvetica");
                doc.setFontType("bold");
                doc.setFontSize(9);

                doc.cell(leftMargin, topMargin, cellWidth, headerRowHeight, cellContent, i)
            }
            else if (rowCount == 2) {
                doc.margins = 1;
                doc.setFont("times ");
                doc.setFontType("italic");  // or for normal font type use ------ doc.setFontType("normal");
                doc.setFontSize(8);                    

                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i); 
            }
            else {

                doc.margins = 1;
                doc.setFont("courier ");
                doc.setFontType("bolditalic ");
                doc.setFontSize(6.5);                    

                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i);  // 1st=left margin    2nd parameter=top margin,     3rd=row cell width      4th=Row height
            }
        })
    })

doc.save('sample Report.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=1; 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; }

这篇关于如何使用jsPDF设置生成pdf的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！