Issues using external stylesheet

I use print.js to print my html page. But why the text color can’t be printed? The rest css style is no problem.

My CSS

#tax td{
      color: #518cb8 !important;
}

My print.js

$(function(){
            printJS({
                printable: 'print-area',
                type: 'html',
                css: ['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
                      'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
                ],
                targetStyles: ['*']
            });
        });

My html

<table>
    <tfoot>
         <tr id="tax">
                <td colspan="4">Tax Base</td>
                <td class="text-right">5000</td>
         </tr>
     </tfoot>
</table>

[crabbly]

Hi @conangithub,

Try passing all your css through the css property, and disable the library style processing.

Ex.:

printJS({
    printable: 'print-area',
    type: 'html',
    css: [
    	'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
      	'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
      	'/css/my-website-stylesheet.css'
    ],
    scanStyles: false
})

This will also be faster since it prevents the client / library from running some javascript code to retrieve all the applied style on your html.

[melancholyfleur]

Update: I was able to just make the changes directly to the file in my local repo to see if they work. The change does seem to help load the fonts internal to the application inside the iframe. Would you be able to either put together a PR with that commit or review one if I put it together, @crabbly?