JSPDF - цвет фона строк на основе значений ячеек - PullRequest
Новая
       17

JSPDF - цвет фона строк на основе значений ячеек

1 голос
/ 10 января 2020

Я создаю PDF с jspdf и autoTable, а сборка таблицы с рулями из JSON.

Я пытаюсь получить цвет фона для определенных строк, которые основаны на определенных значениях в столбце. До сих пор мне удавалось окрашивать фон ячеек с определенными значениями. К сожалению, сейчас я застреваю с окрашиванием всех строк этих определенных ячеек.

Примечание: я использую код для построения визуалов в Postman

Это мой код таблицы руля: 

<body>
 <div id="container" class="container">
   <table id = "${pm.info.requestId}" table class="row-border" style="width:100%">
     <thead>

            <th>Event Type</th>
            <th>eventId</th>
            <th>validTime</th>
            <th>knowledgeTime</th>
            <th>assetType</th>
            <th>symbol</th>
            <th>longShort</th>
            <th>custodianAccount</th>
            <th>strategy</th>
            <th>manager</th>
            <th>basket</th>
            <th>quantity</th>
            <th>nativeCost</th>
            <th>commission</th>
            <th>fee</th>
            <th>Source</th>
            <th>Lot<br>Identifier</th>
            <th>System<br>Action</th>
            <th>COA</th>
            <th>financial<br>Account</th>
            <th>Inventory State</th>
            <th>book cost</th>
     </thead>
     <tbody>
        {{#each response.ledgers}}
        <tr>
            <td>{{eventType}}</td>
            <td>{{eventId}}</td>
            <td>{{validTime}}</td>
            <td>{{knowledgeTime}}</td>
            <td>{{assetType}}</td>
            <td>{{symbol}}</td>
            <td>{{longShort}}</td>
            <td>{{custodianAccount}}</td>
            <td>{{strategy}}</td>
            <td>{{manager}}</td>
            <td>{{basket}}</td>
            <td>{{quantity}}</td>
            <td>{{nativeCost}}</td>
            <td>{{commission}}</td>
            <td>{{fee}}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            <tr>
        {{#each journalEntries}}
        {{#each lines}}
        <td>Journal Entries</td>
        <td>{{../../eventId}}</td>
            <td>{{../time}}</td>
            <td>{{../../knowledgeTime}}</td>
            <td>{{assetType}}</td>
            <td>{{symbol}}</td>
            <td>{{longShort}}</td>
            <td>{{custodianAccount}}</td>
            <td>{{strategy}}</td>
            <td>{{manager}}</td>
            <td>{{basket}}</td>
            <td>{{quantity}}</td>
            <td>{{nativeCost}}</td>
            <td></td>
            <td></td>
            <td>{{icap}}</td>
            <td>{{lotId}}</td>
            <td>{{factType}}</td>
            <td>{{financialAccountType}}</td>
           <td>{{financialAccount}}</td>
            <td>{{inventoryState}}</td>
            <td>{{bookCost}}</td>
            </tr>
            {{/each}}
            {{/each}}
            {{/each}}
     </tbody>
    </table>
 </div>
</body>

И мой код PDF 

<script>
    function generate() {
        //Creation of PDF document
        let doc = new jsPDF('l', 'pt');

        const totalPagesExp = '{total_pages_count_string}';

  var elem = document.getElementById('${pm.info.requestId}');
  var data = doc.autoTableHtmlToJson(elem);
  doc.autoTable(data.columns, data.rows, { 
  theme: 'plain',
    styles: {
        fontSize: 10,
        font: 'Montserrat'
    },

     didParseCell: function (data) {
                    if(data.cell.text.indexOf('EQUITY_CLOSE_LONG') > -1) {
                        data.cell.styles.fillColor = [216, 78, 75];
                        }
                    if(data.cell.text.indexOf('EQUITY_CLOSE_SHORT') > -1) {
                        data.cell.styles.fillColor = [216, 78, 75];
                    }
                },

        // Footer
        var str = "Page " + doc.internal.getNumberOfPages()
        // Total page number plugin only available in jspdf v1.0+
        if (typeof doc.putTotalPages === 'function') {
            str = str + " of " + totalPagesExp;
        }
        doc.setFontSize(10);


        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
        var pageSize = doc.internal.pageSize;
        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
        doc.text(str, data.settings.margin.left, pageHeight - 10);
    },
    margin: {top: 100}
});


  // Total page number plugin only available in jspdf v1.0+
  if (typeof doc.putTotalPages === 'function') {
    doc.putTotalPages(totalPagesExp);
  }

  doc.save('tabled.pdf');
}

</script>

Надеюсь, у кого-то есть идея, спасибо!

РЕДАКТИРОВАТЬ: Вот фотографии того, что у меня есть сейчас и что я хотел бы иметь в качестве конечного результата.

Результат сейчас

Желаемый результат, когда вся строка имеет цвет, основанный на значении ячейки

...