printThis.js css文件未加载

Question

我正在使用printThis.js found 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>'
        });

当我第一次单击该按钮时，样式表没有加载，所以我的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 2

您可以尝试简单地将load CSS调用移动到页面中调用的另一个函数(请记住:浏览器从上到下读取页面，它看起来就像看起来一样直观)。您还可以将调用加载到页面顶部不可见的<span>中。

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

Answer 3

尝试在'loadCSS‘参数中使用完整路径

更新:还注意到如果我关闭了DevTools (选中了“禁用缓存”)，这个bug就会消失。如果我打开F12 -我的CSS加载有问题