如何使特定行加粗?

时间:2017-01-19 14:02:38

标签: jspdf jspdf-autotable

我正在制作一个pdf,直到现在一切正常,但我想要一些特定的行为粗体。例如见图片:grid template from jspdf-autotable 我怎样才能做出例如id = 1且id = 3粗体的行?在我的代码下面。

function createPDF() {
            if(vm.activeCompanyYear){
                var url = "/coci/report/registry/"+vm.activeCompanyYear;

                DataApiService.callApi(url,null,"GET").then(function(reportData){

                    if(reportData){
                        var doc = new jsPDF('p', 'pt');
                        var row = 45;
                        addPdfHeader(doc, row, "");
                        doc.printingHeaderRow = true;
                        var columns = [ "Description", vm.activeCompanyYear,vm.activeCompanyYear-1, vm.activeCompanyYear-2,vm.activeCompanyYear-3,vm.activeCompanyYear-4,"% t.o.v.'13" ];

                        var rows = [];

                        for(var j=0; j<reportData.length; j++){
                            var obj = reportData[j];

                            if (!obj.description ) {obj.description = '';}

                            if (!obj.year5 ) {obj.year5 = '';}

                            if (!obj.year4 ) {obj.year4 = '';}

                            if (!obj.year3 ) {obj.year3 = '';}

                            if (!obj.year2 ) {obj.year2 = '';}

                            if (!obj.year1 ) {obj.year1 = '';}

                            if (!obj.delta ) {obj.delta = '';}


                            /*TODO : Align data right in grid*/

                            var singleRow = [obj.description,obj.year5,obj.year4,obj.year3,obj.year2,obj.year1,obj.delta];
                            rows.push(singleRow);

                        }                       

                        doc.autoTable(columns, rows, {
                            theme : 'grid',
                            styles: {
                                    halign: 'right',
                                     },
                            headerStyles: {
                                         fillColor: [33, 150, 243],
                                         halign:'center'
                            },
                            margin : {
                                top : 100
                                },
                            columnStyles:{
                                 0: {halign:'left'}
                            }

                        });


                        vm.isLoading = false;
                        blockUI.stop();
                        /* doc.save(); */
                        vm.reportData = doc.output('datauristring');

                    }
                });
            }
        }

4 个答案:

答案 0 :(得分:7)

这样的事情应该有效:

doc.autoTable({
  html: '#table',
  didParseCell: function(cell, data) {
    if (data.row.index === 0 || data.row.index === 2) {
      cell.styles.fontStyle = 'bold';
    }
  }
})

答案 1 :(得分:0)

我尝试了以下内容并且有效:

 doc.autoTable(cols, data, { createdCell: function(cell, data) { if (data.row.index === 0 || data.row.index === 2) { cell.styles.fontStyle = 'bold'; } } })

答案 2 :(得分:0)

由于我建议最高接受评论的编辑队列已满,因此我将在修复中添加我自己的评论

  doc.autoTable({
    html: '#table',
    didDrawCell: function (hookData) {
      if (hookData.section === 'body') {
        if (hookData.row.index === 2) {
          for (const cell of Object.values(hookData.row.cells)) {
            cell.styles.fontStyle = 'bold';
          }
        }
      }
    },
  });

答案 3 :(得分:-1)

    var res = doc.autoTableHtmlToJson(document.getElementById(m));
        var idm=document.getElementById(m);
               // console.log("res.rows",res.rows);
                var clength=res.columns.length;
                 var crow=res.rows.length;
        //console.log("columns.length:",clength);
        //console.log("rows.length:",crow);
                var fsize;
                if(clength>13)
                     {fsize=10;}
                else  if(clength>10) 
                     {fsize=10;}
                else  if(clength>7) 
                     {fsize=10;}
                else  if(clength<6) 
                     {fsize=10;}
                if(PdfType=='Flexible')
                     {fsize=7.5;}
                      

    
               //console.log("res.columns:", res.columns, "res.data:", res.data, res);
         doc.autoTable(res.columns, res.data, {margin: {top: vy+25},pageBreak: 'auto',styles: {cellPadding: 1.5,fontSize:fsize , },fontStyle: 'bold',drawRow: function (row, data) {
                currentRow = row;
                        currentRow.height =30;
                       // console.log("row",row);
                       // console.log("data::::",data);
                       
                     
 if((currentRow.cells[0].text[0].includes('Total')) || (currentRow.cells[0].text[0].includes('Avg'))||(currentRow.cells[0].text[0].includes('count'))||(currentRow.cells[0].text[0].includes('Min'))||(currentRow.cells[0].text[0].includes('Max')))

  {
                     // console.log("cell length",res.columns.length);
                      
                      //console.log("cell",currentRow.cells[i].text);
   
                         for(var i=0;i<res.columns.length;i++)
                              {
                              
                                  currentRow.cells[i].styles.fontStyle = "bold";
                                  currentRow.cells[i].styles.font = "sans-serif" ; 
                                  currentRow.cells[i].styles.fillColor = [243,205,204];                 
                                  currentRow.cells[1].styles.columnWidth="wrap";
                                  currentRow.cells[1].styles.FontSize=30;
                                  
                                  }
                                 
                               
                                  
  }                    
        
                
    },columnStyles: {0: {columnWidth: columnwidthrgroup},},});

我只取那一行中的所有单元格,这很简单