CODEWITHSUNDEEP
vue.jsvue-componentquasar-frameworkquasar
Tab
Tab

Reputation: 33

How Print Vue Component W/ Styles

I'm trying to print a component using VueJS all style is in the same file, but it's not getting the CSS Styling. Also I use Quasar framework, don't know if it can affect the final result.

<div style="margin: 12px 12px">
    <div class="central-layout">
      <p>
        <strong
          ><a href="https://www.nightprogrammer.com/" target="_blank"
            >Nightprogrammer.com</a
          ></strong
        >: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
        posuere, tellus lobortis posuere tempor, elit sem varius libero, ac
        vulputate ante orci vel odio. Nam sit amet tortor malesuada tellus
        rutrum varius vel a mauris. Integer volutpat neque mauris, vel imperdiet
        mi aliquet ac. Proin sed iaculis ipsum. Vivamus tincidunt egestas
        sapien, vitae faucibus velit ultricies eget. Donec mattis ante arcu, a
        pretium tortor scelerisque et. Morbi sed dui tempor, consectetur turpis
        sed, tristique arcu.
      </p>
    </div>
  </div>

<style scoped>
.central-layout{
  flex-direction: column-reverse;
}
</style>

exportToPDF() {
      const content = this.$refs.printInteraction.innerHTML
      let cssHtml = ''
      for (const node of [...document.querySelectorAll('style')]) {
        cssHtml += node.outerHTML
      }
      const winPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0')

      winPrint.document.write(`<!DOCTYPE html>
<html>
  <head>
    ${cssHtml}
  </head>
  <body>
    ${content}
  </body>
</html>`)
      winPrint.document.close()
      winPrint.focus()
      winPrint.print()
      winPrint.close()
    }
  }
}

Can anyone help me?

I need to print with the styling set in the page

Upvotes: 1

Views: 913

Answers (1)

kissu
kissu

Reputation: 46764

Exporting that properly may be quite difficult because not all the things are properly supported. I recommend the usage of this: https://github.com/niklasvh/html2canvas

Then you could convert the image into a PDF. But anyway, such thing is quite heavy and should be handled by some backend: convert, host the file on AWS/alike and sent back as a callback.

Upvotes: 1

Related Questions