0
408
VistasVue3 window.print() results in 32k pages pdf
Im trying to print whole page using pretty simple print function. Currently page displays valid html and it looks good. But I have problem after window.print() execution which wants to print 32079 pages as we can see on attached image. What am I missing?
Here is my code
// 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 pages
Div content:
<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 Respuestas
Responde la pregunta0
I use the following component in my projects to print whichever DOM node I want:
<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>
Usage:
<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
Denunciar
Responde la pregunta