Search code examples
javascriptjspdfhtml2canvashtml2pdf

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:

enter image description here

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!

Solution

  • 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.