printThis.js css 文件未加载答案

【问题标题】：printThis.js css file not loadingprintThis.js css 文件未加载
【发布时间】：2016-08-10 18:45:21
【问题描述】：

我正在使用 printThis.js 找到 here

它能够调用外部 CSS 文件，我就是这样做的。我遇到的问题是 CSS 在第一次调用该函数时从未加载，并且打印输出缺少其样式。第二次它通常会工作，这让我觉得需要预加载 CSS 文件。

我尝试使用带有加载 CSS 的暂存页面的隐藏 iframe，但这不起作用。我可以在当前页面上动态加载它，但是像 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？

【问题讨论】：

如何包含 printThis.js 文件？它是本地副本还是 CDN... loadCSS 是否真的可以从您所在页面的目录中工作，还是应该在 /css/specialCSS.css 前面加上前缀请提供更多详细信息
我有一个包含在 HTML 页面标题中的 js 文件的本地副本。我很确定相对路径都是正确的，因为打印将在我第二次打印时工作。我认为如果路径错误，它将永远无法工作。
你能解决这个问题吗？

标签： jquery printthis

【解决方案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 将是一场噩梦，并且会违背这个插件的基本原理。

【讨论】：

我无法使用此解决方案解决我的问题。我仍然遇到同样的错误。有输入吗？

【解决方案2】：

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

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

【讨论】：

用户缺少修复此问题的关键语法。看我的回答。我的答案应该是更新后的批准答案。

【解决方案3】：

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

更新：还指出，如果我关闭了 DevTools（选中“禁用缓存”）-此错误消失。如果我打开 F12 - CSS 加载有问题

【讨论】：