Question

0

406

Views

Vue3 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>

about 4 years ago · Santiago Gelvez

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T23:58:02.546Z

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>

0

406

Vue3 window.print() results in 32k pages pdf

1 answers

0

Find remote jobs

Andres GPT