如何在不影响页面的情况下指导html2pdf使用哪个样式表？
我正在使用库Html2Pdf，它非常好地允许我的应用程序的用户以PDF格式下载他们以HTML显示的发票。遇到的问题是，当任何人在使用黑暗模式时需要下载他/她的发票。
通过在链接标签中添加/删除“禁用”属性，从光模式切换到暗模式并反向工作：
<link href="path/to/css/app.css" rel="stylesheet" type="text/css" id="light" />
<link href="path/to/css/app-dark.css" rel="stylesheet" type="text/css" id="dark" disabled="disabled" />这两个文件都有相同的css规则，只有颜色变化。
如果有人正在使用黑暗模式并需要下载PDF，html2pdf.js将按照当前的css规则准确地打印它，因此带有黑色/灰色背景/字体，这对发票来说并不理想！
我已经尝试在函数中动态更改样式，该函数在单击后呈现PDF，但是当然，更改对用户来说是明显可见的，因为它会影响整个页面(应用程序页面在这里的意思)。
因此，我的问题是:如何在不影响页面本身的情况下告诉函数html2pdf()使用哪些CSS规则？
编辑
由于客观上没有真正的解决方案，这就是我所做的(也不是骄傲的)：
我将用于PDF打印的整个元素复制到第二个版本，以隐藏用户(display: none;)，并在每个相关元素和其他元素上设置自己的样式。
因此，这个版本仍然是基于白色的，并且"display: none“样式属性不会影响html2pdf如何获取元素来创建一个基于。
这是我目前唯一找到的解决方案，但如果有人带着合适的解决方案，我当然会很高兴的！
回答 2
Stack Overflow用户
发布于 2021-12-07 22:54:15
您可以将样式粘贴到头，甚至可以粘贴样式文件。它在这里不起作用，但是看看codepen.io
如果不需要支持旧浏览器，可以使用css变量，例如单击后，通过document.documentElement.style.setProperty("-color", "#000");更改参数。
我知道这并不能解决问题，但对html2pdf本身的更改似乎很难实现。
const button = document.querySelector(".makePDF");
button.addEventListener("click", (e) => {
e.preventDefault();
const style = document.createElement("style");
style.textContent = `body { background: #fff; color: #000; }`;
document.head.appendChild(style);
const element = document.querySelector("body");
const opt = {
margin: 1,
filename: "myfile.pdf",
image: {
type: "jpeg",
quality: 0.98
},
html2canvas: {
scale: 1
},
jsPDF: {
unit: "mm",
orientation: "landscape",
},
};
html2pdf().set(opt).from(element).save();
});body {
font-family: nhg-text-bold, arial, sans-serif;
font-weight: bold;
letter-spacing: -0.4px;
background: #000;
color: #fff;
}
.border {
height: 400px;
width: 890px;
border: 1px solid red;
}
.verLogo {
padding-left: 400px;
font-size: 25px;
}
.mainContent h1 {
margin-left: 280px;
letter-spacing: 1.5px;
}
.sepLine {
border-bottom: 1px solid black;
width: 300px;
margin-left: 300px;
}
.UserName,
h2,
h3 {
margin-left: 350px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" class="makePDF">PDF</button>
<div id="content">
<div class="border">
<div class="mainContent">
<h1>CONGRATULATIONS</h1>
<div class="sepLine"></div>
<span class="UserName">
<h2>xxxxxxxxxxxxx</h2>
<h3>You have completed</h3>
<h1>Lorem, ipsum dolor.</h1>
</span>
</div>
</div>
</div>
Stack Overflow用户
发布于 2021-12-07 21:15:47
将适当的颜色覆盖到@media print块中，并始终将该CSS包含在页面上。例如,
<style>
@media print {
body {
background-color: white !important;
color: black !important;
}
}
</style>https://stackoverflow.com/questions/70266865
复制相似问题
腾讯云开发者
