jquery - printThis.js css 文件未加载

Question

我正在使用 printThis.js 发现 here

它能够调用外部 CSS 文件，我就是这么做的。我遇到的问题是，第一次调用函数时 CSS 永远不会加载，并且打印输出缺少其样式。第二次通常就可以了，这让我觉得 CSS 文件需要预加载。

我尝试使用带有临时页面的隐藏 iframe 来加载 CSS，但这不起作用。我可以在当前页面上动态加载它，但是像 body 这样的元素的重叠设置会变得困惑。

这是 jquery 代码:

$("#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");

有没有办法强制插件预加载CSS？

Answer 1

我刚刚遇到了这个问题。这是我使用的代码:

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

当我第一次单击该按钮时，样式表未加载，因此我的打印 CSS 未加载。当我再次单击操作按钮时，样式将按预期显示。我缺少 importCSS:true 的关键语法，我认为它为我预加载了文件。所以我更新的代码是:

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

尝试通过 iframe 预加载此 css 将是一场噩梦，并且会违背此插件的基本原理。