0
409
ViewsVue3 window.print () da como resultado 32k páginas pdf
Estoy tratando de imprimir toda la página usando una función de impresión bastante simple. Actualmente, la página muestra html válido y se ve bien. Pero tengo un problema después de la ejecución de window.print() que quiere imprimir 32079 páginas como podemos ver en la imagen adjunta. ¿Qué me estoy perdiendo?
Aquí está mi código
// Html element that i want to print (whole page) const prtHtml = document.getElementById('printer').innerHTML; // Get all stylesheets HTML (using tailwind) let stylesHtml = ''; for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) { stylesHtml += node.outerHTML; } // Open the print window const WinPrint = window.open('', '', 'left=0,top=0,width=1200,height=1600,toolbar=0,scrollbars=0,status=0'); WinPrint.document.write(`<!DOCTYPE html> <html> <head> ${stylesHtml} </head> <body> ${prtHtml} </body> </html>`); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); // trying to print 32k pagescontenido div:
<div id="printer" class="bg-background min-h-screen prose"> <div class="container mx-auto p-4"> <div class="max-w-7xl mx-auto"> <router-view /> </div> </div> </div>
·
Santiago Gelvez
1 answers
Answer question0
Uso el siguiente componente en mis proyectos para imprimir cualquier nodo DOM que desee:
<template> <iframe ref="printFrame" class="printFrame" /> </template> <script> export default { name: 'PrintPage', props: { landscape: { type: Boolean, default: false } }, methods: { print(node) { let css = ''; const styles = document.querySelectorAll('style'); for (let i = 0; i < styles.length; i++) { css += styles[i].innerHTML; } let sheet = ''; const stylesheets = document.querySelectorAll('link[rel="stylesheet"]'); for (let i = 0; i < stylesheets.length; i++) { sheet += '<link rel="stylesheet" href="' + stylesheets[i].href + '">'; } css += '@page { size: ' + (this.landscape ? 'landscape' : 'A4') + '; margin: 10mm; }' + 'html,body { overflow: visible !important; }' + '.print_report.v-application { display: block; overflow: visible; }' + '.print_report.v-application .v-application--wrap { display: block; }'; const doc = this.$refs.printFrame.contentDocument; doc.open(); doc.write( '<!DOCTYPE html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0">' + sheet + '<style type="text/css">' + css + '</style></head>' ); // we have to wait until the Material Design icons have been loaded before printing doc.write( '<body onload="window.print();"><div class="v-application v-application--is-ltr theme--light print_report">' + node.outerHTML + '</div></body></html>' ); doc.close(); } } }; </script> <style> .printFrame { border: none; /* with display:none the Material Design font is unable to load fast enough before we print the Frame */ visibility: hidden; position: absolute; top: 0; } @media print { .no_print { display: none; } .v-application { background-color: white !important; } } </style>Uso:
<template> <!-- some other component --> <PrintPage ref="frame" /> <div ref="fragment"> <!-- your content to be printed --> </div> </template> <script> import PrintPage from '@/components/PrintPage.vue'; export default { methods: { printFragment() { this.$refs.frame.print(this.$refs.fragment); } } } </script>
·
Santiago Gelvez
Report
Answer question