使用Print.js打印文章时自定义print CSS被忽略的问题求助

我在开发具备多项功能的博客模板，其中包含「打印文章」功能，使用了Print.js工具和自定义的打印专属CSS，但页面能正常打印，自定义CSS却被忽略，相关代码如下：

自定义打印CSS引入代码 #

<link rel="stylesheet" href="assets/css/print.css" media="print">

待打印内容代码 #

<main class="content" id="article-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, sapiente? Veritatis error nemo exercitationem molestias praesentium perspiciatis est officia quod sequi mollitia, omnis optio? Labore autem doloribus quidem quos consectetur?</p>
</main>

打印按钮代码 #

<a href="#" id="print_btn" onclick="printJS('article-content', 'html')">
    <i class="fa fa-print"></i> Print
</a>

1. 问题原因 #

Print.js处理HTML打印时，会创建一个独立的iframe来承载待打印内容。你通过<link>引入的media="print"外部CSS，不会自动被加载到这个新iframe中，因此自定义样式无法作用到打印内容上。

2. 简单可靠的修复方法 #

方法一：调用printJS时指定加载的CSS文件

修改打印按钮的点击事件，在printJS的配置中明确传入CSS文件路径：

<a href="#" id="print_btn" onclick="printJS({printable: 'article-content', type: 'html', css: 'assets/css/print.css'})">
    <i class="fa fa-print"></i> Print
</a>

这种方式会让Print.js主动把指定的CSS文件加载到打印用的iframe里，样式就能正常生效。

方法二：内嵌打印样式到页面

把print.css中的所有样式内容直接放到页面的<style media="print">标签内：

<style media="print">
/* 粘贴print.css里的全部样式代码 */
.content p {
    /* 示例样式 */
    font-size: 14px;
    line-height: 1.6;
}
</style>

这样Print.js在复制待打印内容时，会一并带上内嵌的打印样式，无需额外加载外部文件。

内容的提问来源于stack exchange，提问作者Razvan Zamfir