为什么这个打印脚本忽略我的自定义CSS？

k5hmc34c 于 2023-02-26 发布在其他

关注(0)|答案(2)|浏览(133)

我正在开发一个具有多种功能的博客模板，其中包括一个 * 打印文章 * 功能。
为此，我使用了**Print.js**和一些定制的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>

问题是

尽管页面 * 确实 * 打印出来，但我的 * 自定义CSS被忽略 *。

问题

1.此问题的原因是什么？
1.什么是简单可靠的修复方法？

css

来源：https://stackoverflow.com/questions/75535559/why-does-this-printing-script-ignore-my-custom-css

2条答案

按热度按时间

jvidinwx1#

阅读您提供的文档：
“这允许我们传递一个或多个应应用于要打印的html的css文件URL。值可以是具有单个URL的字符串或具有多个URL的数组。”
调用脚本的css属性将生成您要查找的内容

赞(0）回复(0）举报 2023-02-26

bsxbgnwa2#

包括一个专门用于打印的样式表，然后根据您的需要设置样式。

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

<!-- css -->
@media print {
#content, #page {
width: 100%; 
margin: 0; 
float: none;
}
         
@page { margin: 2cm }

body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
font-family: "Times New Roman", Times, serif;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
font-family: "Times New Roman", Times, serif;
}            
}

赞(0）回复(0）举报 2023-02-26

我来回答

为什么这个打印脚本忽略我的自定义CSS？

问题是

问题

2条答案

相关问题

热门标签

最新问答