jqueryprintthis

printThis.js css file not loading


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?


Solution

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