CODEWITHSUNDEEP
javascriptjqueryprintthis
SLubbinge13
SLubbinge13

Reputation: 26

Printthis.js now showing hyperlinks

We have a page that gets printed via printthis.js, everything is working as expected except that hyperlinks aren't shown if importStyle: false, we need to set it to false as the style of the document needs to be a lot different to the page style. I have tried a few different styles on the links in the CSS file for the pdf to no avail. Here is the current code.

jQuery(function(){    
    jQuery('a[id="printbutton"]').click(function(){         
            jQuery('').printThis({
                debug: false,  
                importStyle: false, 
                importCSS: false,  
                loadCSS: "/pdfstyle.css",
                removeInline: true,  
                footer: jQuery(".printthis"),
            });
        });
    });

<p style="text-align: left;margin-bottom: 30px;">Please click the button below to start your download</p>
<a onClick="document.title = 'My new title';" id="printbutton" class="pp-button" style="padding: 10px; background-color: #9aab21; color: white; margin-top: 20px;" role="button" href="#">
<span class="pp-button-text">DOWNLOAD THE PDF</span>
</a>

Upvotes: 0

Views: 301

Answers (1)

Jason
Jason

Reputation: 7682

See: https://github.com/jasonday/printThis/wiki/Styling-Printed-Content#printing-backgrounds

By default, browsers do not print backgrounds to save on ink/toner, but they do not adjust foreground colors. With your CSS, the links are there, they are just white against a white background in the print document:

background-color: #9aab21; color: white;

Remove the background color and change the color of the link, and they will be visible.

Upvotes: 1

Related Questions