No se pueden copiar todos los estilos del documento original para implementar window.print(). Localhost funciona bien, pero la versión de producción no.
Tengo que obtener todos los estilos de mi aplicación Vue. He seguido el código escrito aquí: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style
Esto no es una solución perfecta pero funciona bien (en localhost). Con esta línea de código:
[...document.querySelectorAll('link[rel="stylesheet"], style')]
Estoy obteniendo 60 registros de hojas de estilo en localhost. Desafortunadamente, solo se aplican 6 hojas de estilo en producción (de Vuetify).
Aquí está la implementación de la función:
downloadReport(): void {
const prtHtml = window.document.getElementById("print")!.innerHTML;
// Obtener todo el HTML de las hojas de estilo
let stylesHtml = "";
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml += node.outerHTML;
}
console.log("CONTADOR: ", [...document.querySelectorAll('link[rel="stylesheet"], style')].length);
const winPrint = window.open("", "", "left=0,top=0,width=1500,height=800,toolbar=0,scrollbars=0,status=0")!;
winPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
<title>${this.fileName}</title>
</head>
<body>
${prtHtml}
</body>
</html>`);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
},
En la plantilla tengo una etiqueta de sección que quiero poner en el archivo PDF generado:
<section id="print" class="report print-area">contenido</section>
¿Qué puedo hacer para aplicar todos los estilos también en producción?
davy.ai
Solución para aplicar todos los estilos en producción
El código en el enlace proporcionado solo está obteniendo las hojas de estilo que están definidas como etiquetas
link, y los estilos definidos dentro de las etiquetas<style>no están siendo obtenidos. Para obtener todos los estilos, incluyendo aquellos dentro de las etiquetas<style>, podemos modificar el código de la siguiente manera:En este código modificado, estamos obteniendo todos los elementos de estilo y concatenando su HTML a
stylesHtml. Esto incluirá todos los estilos definidos en las hojas de estilo y en las etiquetas `