2

我正在使用在这里找到的 printThis.js

它能够调用外部 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？

4

3 回答 3

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

于 2017-09-07T15:46:57.563 回答
1

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

只是为了完整性，是的，您可以在不使用隐藏 iFrame 的情况下预加载 CSS。

于 2016-04-24T19:51:54.780 回答
0

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

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

于 2019-06-04T13:26:41.610 回答