Can I print text color & icons to PDF?

ægteEmil

I've recently changed a table to format some text in red, green or orange. Additionally, another column includes either a checkmark, an empty cell or a red cross indicating a boolean. However, when I print this, neither the color nor the icons are included. I'm using font-awesome icons, if that makes a difference.

How, if possible, can I solve this? I found the exportOptions where I set stripHtml:false, but it's made no difference.

colin

This example here shows checks with a PDF export, but the same principle would apply. And this should help with the print,

Colin

ægteEmil

@colin the SO post extends the pdfHtml5 button. I'm currently using print - will this make a difference?

colin

Yep, this is the example updated to show it with a print button - you'll see the checkboxes are converted to a Y/N instead.

Colin

ægteEmil

@colin Did you mean to link to a new example, or am I misunderstanding what you're saying?

I attempted extending the customize method with a similar function as this:

customize: function(doc) {
          for (var row = 0; row < doc.content[1].table.headerRows; row++) {
            var header = doc.content[1].table.body[row];
            for (var col = 0; col < header.length; col++) {
              header[col].fillColor = 'blue';
            }
          }
        }      

But I am shown an error:
Cannot read properties of undefined (reading '1')

colin

Wow, that's impressive forgetting the link twice!! I must stop post before the coffee kicks in. This is it here: http://live.datatables.net/mecigipu/1/edit

Could you create a test case for that error, please, it'll help us to debug it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ægteEmil

@colin I've created a non-working link here, after trying to replicate my local code .. I have a separate button to trigger the print of the table.

live.datatables.net/kevosube/2/edit

Perhaps you can help me with this issue? I didn't find something obvious as to why it's not working properly.

On my real code, when the button is clicked an about:empty page opens up where the table only is displayed, after which the browsers print-window opens up. This browser print window shows the icons properly, but there is no color.

colin

It's because you haven't included the buttons sources - see here. It's failing now as you've got more columns than there are in the table.

Colin

ægteEmil

@colin In this copy the colors aren't working properly:
http://live.datatables.net/kevosube/5

colin

Did you look at the second thread I posted in my original reply, it's discussing how to achieve that,

Colin

ægteEmil

@colin I've added this bit of code which seems to mirror what's been posted in the SO flow you linked to:

"buttons": [
 {
  extend: 'print',
   customize: function (doc) {                
    test = table.column(1).nodes().toArray();
    for(var i = 0; i<test.length; i++){
     if(test[i].className == 'education-text-red'){
      doc.content[1].table.body[i+1][1].fillColor = 'blue'; // this is where the error is thrown from
      test[i].color = 'blue'; // I thought this might work, but it doesn't
     }
    }
[...]

However, when running it, I'm shown this error:

"TypeError: Cannot read properties of undefined (reading '1')
    at Object.customize (http://live.datatables.net/runner:21:32)
    at B.action (https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js:8:417)
    at g 
[...]

Do you know what I'm missing?
Edit here:
http://live.datatables.net/kevosube/8/edit

allan

doc.content[1].table.body[i+1][1]

It is probably that. I would suggest putting a breakpoint there in your code and checking that it does actually have those properties.

Allan

ægteEmil

Yeah it is, but I can't figure out why, or what to do instead to make the text change color

ægteEmil

@allan Do you have any idea as to why the property doesn't exist, or how else I can change the text color on the PDF output?

colin

I think the doc.content is only for the PDF export, not the print. This SO thread appears to be doing the trick - hopefully that'll get you going,

Colin