11

我正在生成一个 pdf，到目前为止一切正常，但我希望一些特定的行是粗体的。例如，请参见图片：来自 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

4 回答 4

14

像这样的东西应该工作：

doc.autoTable({
  html: '#table',
  didParseCell: function(cell, data) {
    if (data.row.index === 0 || data.row.index === 2) {
      cell.styles.fontStyle = 'bold';
    }
  }
})
于 2017-01-19T14:27:39.910 回答
2

我尝试了以下方法并且它有效：

 doc.autoTable(cols, data, { createdCell: function(cell, data) { if (data.row.index === 0 || data.row.index === 2) { cell.styles.fontStyle = 'bold'; } } })
于 2017-01-19T17:40:03.817 回答
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';
          }
        }
      }
    },
  });
于 2021-03-08T17:39:53.567 回答
-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},},});

我只取那一行中的所有单元格，这很容易

于 2021-01-05T08:08:37.970 回答