Estoy usando la biblioteca Html2Pdf que funciona muy bien para permitir que los usuarios de mi aplicación descarguen en formato PDF sus facturas que se muestran en HTML. El problema encontrado es cuando alguien necesita descargar su factura mientras usa el modo oscuro.
Cambiar de modo claro a oscuro y viceversa funciona agregando/eliminando un atributo "deshabilitado" a la etiqueta del enlace:
<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" />Ambos archivos tienen las mismas reglas css, solo cambian los colores.
Si alguien está usando el modo oscuro y necesita descargar un PDF, html2pdf.js lo imprimirá exactamente como se muestra según las reglas CSS actuales, por lo tanto, con fondos/fuentes negros/grises, ¡lo que no es realmente ideal para una factura!
Ya intenté cambiar los estilos dinámicamente en la función que representa el PDF después de hacer clic, pero, por supuesto, el cambio es claramente visible para el usuario, ya que afecta a toda la página (aquí se entiende la página de la aplicación).
Por lo tanto, mi pregunta es la siguiente: ¿Cómo podría decirle a la función html2pdf() qué reglas de CSS usar sin afectar la página en sí?
EDITAR
Dado que objetivamente no hay una solución real, esto es lo que hice (y no me enorgullezco):
Dupliqué todo el elemento que se usó para la impresión de PDF en una segunda versión oculta del usuario (mostrar: ninguno;) con su propio estilo en cada uno de los elementos en cuestión y en otros.
Por lo tanto, esta versión permanece basada en blanco y la propiedad de estilo "display: none" no afecta la forma en que html2pdf obtiene el elemento para crear un PDF basado en él.
Esta es la única solución que encontré por ahora, ¡pero por supuesto me encantaría que alguien viniera con una adecuada!
Puede pegar el estilo en la cabecera o incluso en un archivo de estilos. No funciona aquí, pero echa un vistazo a codepen.io
Si no necesita admitir navegadores antiguos, puede usar las variables css y, por ejemplo, después de hacer clic, cambie los parámetros por document.documentElement.style.setProperty("-color", "#000");
Sé que esto no resuelve el problema, pero un cambio en el propio html2pdf parece muy difícil de obtener.
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>Coloque las anulaciones de color adecuadas en un bloque de @media print e incluya siempre ese CSS en la página. Por ejemplo,
<style> @media print { body { background-color: white !important; color: black !important; } } </style>