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

您可以尝试简单地将load CSS调用移动到另一个在页面中调用更高的函数（请记住：浏览器从上到下读取页面，它看起来非常直观）。您还可以在页面顶部的隐身<span>中加载呼叫。

为了完整起见，yes, you can preload CSS without using a hidden iFrame。

Answer 2

我刚遇到这个问题。这是我正在使用的代码：

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

当我第一次点击按钮时，样式表没有加载，因此我的print 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将是一场噩梦，并且会违反此插件的基础知识。

Answer 3

尝试在“ loadCSS”参数中使用完整路径

printThis.js css文件未加载

3 个答案: