jQuery PrintArea prints blank page

Question

I want to print a form using jQuery print area, a custom stylesheet, and some javascript code. The actual site's page is:

http://dev.radioimagendigital.com/orden-de-servicio/

And the button that calls the print area action is "Imprimir", the css file passed as parameter to the PrintArea plugin is:

http://dev.radioimagendigital.com/wp-content/themes/stability/print1.css

And the actual javascript code is:

jQuery("div.b1").click(function(){
    var print = "";
    jQuery("input.selPA:checked").each(function(){
        print += (print.length > 0 ? "," : "") + ".content_orden_servicio" + jQuery(this).val();
    }); 


    var template_uri = '<?php echo get_template_directory_uri(); ?>'; 
    jQuery(".content_orden_servicio").printArea({
        mode       : "iframe",
        standard   : "html5",
        retainAttr : ["id","class"],
        printDelay : 500,
        printAlert : true,
        extraCss   : 'http://dev.radioimagendigital.com/wp-content/themes/stability/print1.css'
    });
});

As soon as I try to print the form, I got a blank page. Why is that? and How can I solve this issue?

Any help will be really appreciated.

Thanks a lot

Answer 1

总体而言，这是一个CSS问题，css设法以某种方式在chrome中隐藏了打印机中的所有内容，为解决此问题，我创建了一个新的iframe，其中包含要打印的内容和css规则，并从中调用了jquery打印区域。