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

Question

我正在使用库 Html2Pdf，它运行得非常好，允许我的应用程序的用户下载以 HTML 形式显示的 PDF 格式的发票。遇到的问题是当任何人需要在使用深色模式时下载他/她的发票时。

从浅色模式切换到深色模式以及通过向链接标签添加/删除“禁用”属性来实现相反的效果：

<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”样式属性不会影响 html2pdf 获取元素以创建 PDF 的方式。

这是我目前找到的唯一解决方案，但如果有人提供合适的解决方案，我当然会很高兴！

Answer 1

您可以将样式粘贴到头甚至样式文件中。它在这里不起作用，但请查看 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>

Answer 2

您可以尝试使用 toContainer() 函数来解决该问题。

像这样：

html2pdf().set(opt).from(itinerary).toContainer().save();

当您这样做时，Html2Pdf 会将您的内容包装在带有此类的 div 中： html2pdf__container

然后您可以通过 css 转换您的样式。

我深入研究源代码发现了这一点： https://github.com/eKoopmans/html2pdf.js/blob/master/src/worker.js （第 97 至 128 行）

注意：您需要注意 Html2Pdf 也将内联样式应用于容器。因此，如果您想覆盖以下任何内容，则必须使用 ！重要

/* inline styles (lines 111 to 115) */
var containerCSS = {
  position: 'absolute', width: this.prop.pageSize.inner.width + this.prop.pageSize.unit,
  left: 0, right: 0, top: 0, height: 'auto', margin: 'auto',
  backgroundColor: 'white'
};

Answer 3

将适当的颜色覆盖放在

@media print

块中，并且 always 在页面上包含该 CSS。例如，

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