html2pdf, table content is faded

I tried both versions of html2pdf v0.10.1 and ^0.9.3 and got the same issue when exporting the table to Pdf. It's content looks faded/muted, whereas the table header and borders look good:

Interestingly, this happens only with one table, all other data and similar tables are exported fine.
Here's the JS:

 var element = document.getElementsByClassName(elementClass)[0];
    var opt = {           
        margin: 1,
        filename: filename,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true },
        jsPDF: { unit: 'in', format: 'a4', orientation: isMobile? 'portrait': 'landscape' }
    };
    html2pdf().set(opt).from(element).outputPdf().then(function (pdf:any) {
        dotNetObj.invokeMethodAsync('FinishExporting');
    }).save();

Am I missing any other configuration? Any help is much appreciated!

I've created THIS GIST with a working example.

You will notice the <style> tag to ensure table rows are striped gray. Your pdf will be rendered accordingly. If you remove the style tag, your table rendered by the browser will still be striped, but not in your pdf.

I used bootstrap to make the table look good, and some properties of bootstrap are not recognized by html2pdf, but they are recognized by your browser.

For example, bootstrap generates the following css for the table:

.table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-body-bg);
    /* etc etc etc */
}

But Html2Pdf can't understand it. It understands simpler CSS.

You need to check the css generated of the tool you are using and play with google's developper's tools "ctrl shift i" to see if you can style with simpler css.

Maybe this answer will still not solve your issue. Thus, you need to give us a full working sample of this code, just like I did, or at least tell us what tools are you using. If this answer does not help you, please tell me a bit more before downvoting.

I had similar problem recently when I tried to save page as PDF (some elements looked differently when I tried to print them as PDF), I have not used html2pdf but problem looks similar.

It was all caused by print styles.

I would like to suggest checking css for:

@media print 

If there are some css rules like opacity, color, filter... Then it might be cause of this problem.

I think, you can set the backgroundColor property to ensure that the table is rendered with the correct background color.

   html2canvas: { 
    scale: 2,
    useCORS: true,
    backgroundColor: null  // Set the background color to null or a specific color value
},