How can I direct html2pdf which stylesheet to use without affecting the page?-CodePudding

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?

CodePudding user response：

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.

Show code snippet

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>

CodePudding user response：

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>