printThis.js css file not loading

Question

I'm using printThis.js found here

It has the ability to call an external CSS file, which I do. The problem I'm running into is that the CSS never loads the first time the function is called, and the printout is missing its styles. The 2nd time it will usually work, which makes me think the CSS file needs to be preloaded.

I've tried using a hidden iframe with a scratch page that loads the CSS, but that doesn't work. I could load it dynamically on the current page, but overlapping settings for elements like body get messed up.

Here is the jquery code:

$("#printDiv").printThis({
     debug: false,             
     importCSS: false,          
     importStyle: false,        
     printContainer: true,      
     loadCSS: "css/specialCSS.css", 
     pageTitle: "the page title",      
     removeInline: false,     
     printDelay: 0,           
     header: null,               
     formValues: false          
 });                

$("#print").html("Print");

Is there a way to force the plug in to preload the CSS?

How are you including the printThis.js file? is it a local copy or a CDN... does loadCSS actually work from the directory you are in for your page or should you prefix that with /css/specialCSS.css Please provide more detail — bretterer, Apr 18 '16 at 21:00
I have a local copy of the js file that I'm including in the HTML page header. I'm pretty sure the relative paths are all correct because the print will work the 2nd time I print. I'd think if the path was wrong it would never work. — Shawn, Apr 18 '16 at 21:09

score 3 · Accepted Answer · answered Sep 07 '17 at 15:46

i just ran into this issue. here is the code i was using:

$('selector').printThis({
            loadCSS: "/app/css/printListTable.css",
            header:'<h1>'+$pageTitle+' Table Report</h1>'
        });

when i first clicked the button, the stylesheet was not loaded so my print css was not loading. when i clicked the action button again, then the style showed as expected. i was missing a key syntax of importCSS:true, which i assume preloads the file for me. so my updated code would be:

$('selector').printThis({
                importCSS: true,
                importStyle: true,//thrown in for extra measure
                loadCSS: "/app/css/printListTable.css",
                header:'<h1>'+$pageTitle+' Table Report</h1>'
            });

trying to preload this css via an iframe would be a nightmare and would go against the fundamentals of this plugin.

I am not able to resolve my problem with this solution. I am still getting the same error. Any inputs? — SohailAQ, Feb 07 '18 at 16:43

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You could try simply moving the load CSS call to another function that's called higher in the page (remember: the browser reads the page top to bottom, it's exactly as intuitive as it seems). You could also load the call in an invisible <span> at the top of the page.

Just for completeness, yes, you can preload CSS without using a hidden iFrame.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 24 '16 at 19:51

Scott Forsythe

360
6
18

user is missing key syntax to fix this problem. see my answer. my answer should be the updated approved answer please. – Zach Smith Sep 07 '17 at 15:44

Gennady G · Answer 3 · 2020-06-11T18:51:14.507

0

Try to use full path in 'loadCSS' parameter

Update: also noted that if I have DevTools (with "Disable cache" checked) closed - this bug dissapears. If I open F12 - have troubles with CSS loading

edited Jun 11 '20 at 18:51

answered Jun 04 '19 at 13:26

Gennady G

996
2
11
28

printThis.js css file not loading

3 Answers3