如何在不影响页面的情况下指导 html2pdf 使用哪个样式表？

Question

I'm using the library Html2Pdf which works really well to allow my app's users to download as PDF their invoices displayed in HTML. The problem encountered is when anyone needs to download his/her invoice while using dark mode.

Switching from light to dark mode and reverse works by adding/removing a "disabled" attribute to the link tag:

<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" />

Both files have the same css rules, only colours change.

If someone is using dark mode and need to download a PDF, html2pdf.js will print it exactly as it shown based on current css rules, therefore with black/gray backgrounds/fonts which isn't really ideal for an invoice!

I already tried to change styles dynamically in the function which render the PDF after click, but of course the change is clearly visible to the user since it affects the whole page (app page meaned here).

Therefore, my question is the following: How could I tell the function html2pdf() which CSS rules using without affecting the page itself?

Answer 1

You can paste style to head or even a styles file. It doesn't work here, but check out codepen.io

If you do not need to support old browsers, you can use the css variables and, for example, after clicking, change the parameters by document.documentElement.style.setProperty("-color", "#000");

I know this does not solve the problem, but a change to the html2pdf itself seems very hard to obtain.

 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>

Answer 2

Place the appropriate color overrides in a @media print block, and always include that CSS on the page. For example,

<style>
@media print {
  body {
    background-color: white !important;
    color: black !important;
  }
}
</style>