Can I print text color & icons to PDF?

Can I print text color & icons to PDF?

ægteEmilægteEmil Posts: 20Questions: 3Answers: 0

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.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • ægteEmilægteEmil Posts: 20Questions: 3Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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ægteEmil Posts: 20Questions: 3Answers: 0

    @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')

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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ægteEmil Posts: 20Questions: 3Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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ægteEmil Posts: 20Questions: 3Answers: 0
    edited December 2021

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • ægteEmilægteEmil Posts: 20Questions: 3Answers: 0
    edited December 2021

    @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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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ægteEmil Posts: 20Questions: 3Answers: 0

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

  • ægteEmilægteEmil Posts: 20Questions: 3Answers: 0

    @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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

Sign In or Register to comment.