【问题标题】:How can i make a specific row bold?如何使特定行加粗?
【发布时间】:2017-06-04 06:18:55
【问题描述】:

我正在生成一个 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');

                    }
                });
            }
        }

【问题讨论】:

    标签: jspdf jspdf-autotable


    【解决方案1】:

    由于我建议编辑队列已满,接受最多的评论我将添加我自己的评论和修复

      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';
              }
            }
          }
        },
      });
    

    【讨论】:

      【解决方案2】:
          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},},});
      

      我只取该行中的所有单元格,这很容易

      【讨论】:

        【解决方案3】:

        这样的事情应该可以工作:

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

        【讨论】:

        • 嗨,朋友,我尝试了以下方法并且成功了: doc.autoTable(cols, data, { createdCell: function(cell, data) { if (data.row.index === 0 || data.row.index === 2) { cell.styles.fontStyle = 'bold'; } } })
        • 对我来说,数据参数未定义,必须使用单元参数本身,如下所示:` didParseCell: function(cell, data) { if (cell.row.index === 0) { cell.cell.styles.fontStyle = '粗体'; } },` 不知道为什么会这样。
        • 嘿@Sharath,这是因为他们将函数更改为仅接收一个包含单元格和数据的参数。取而代之的是函数(cell, data)使用函数(hookData),然后在里面分别使用hookData.data和hookData.cell
        【解决方案4】:

        我尝试了以下方法并且成功了:

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

        【讨论】:

          猜你喜欢
          • 2022-07-10
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-05-11
          相关资源
          最近更新 更多