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

您可以尝试将 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>'
        });

当我第一次点击按钮时，样式表没有加载，所以我的打印 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'参数中使用完整路径

更新：还注意到如果我关闭了 DevTools（选中 "Disable cache"）——这个错误就会消失。如果我打开 F12 - CSS loading

有问题

printThis.js css 文件未加载

printThis.js css file not loading

jquery

printthis