CODEWITHSUNDEEP
javascriptvue.jsprinting
Tanmay
Tanmay

Reputation: 3189

How to print a part of a vue component without losing the style

I want to print some content from a vue component. For example from the following snippet, I would like to print the v-card-text element which also has an id of #print:

new Vue({
  el: '#app',
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    print() {
      var prtContent = document.getElementById("print");
      var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
      WinPrint.document.write(prtContent.innerHTML);
      WinPrint.document.close();
      WinPrint.focus();
      WinPrint.print();
      WinPrint.close();
    }
  }
})
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-layout row justify-center>
        <v-dialog v-model="dialog" persistent max-width="290">
          <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
          <v-card>
            <v-card-title class="headline">Print This:</v-card-title>
            <v-card-text id="print">Lorem ipsum dolor sit amet.</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green darken-1" flat @click.native="print">Print</v-btn>
          </v-card>
        </v-dialog>
      </v-layout>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>

</html>

However,when I get prompted for the print, all the styles associated with it goes away. How can I print a vue component in such a way so that the components won't lose the associated styles? I recommend to copy the snippet to your local machine for the best effect.

Upvotes: 23

Views: 59270

Answers (3)

KasunSH
KasunSH

Reputation: 27

this answer for VUE ONLY. easiest way use this function. do not call the function directly from HTML tag will not work. code as below inside a function call window.print().

printDoc() { window.print(); }

@media print {
  //use your CSS over here customize your prints components.
  ::v-deep .right-sidebar,
  ::v-deep header {
    display: none !important;
  }
  ::v-deep footer {
    display: none !important;
  }
}

Upvotes: 2

Ali Hassan
Ali Hassan

Reputation: 899

Install this package vue-html-to-paper

npm install vue-html-to-paper

usage:

import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';

const options = {
  name: '_blank',
  specs: [
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes'
  ],
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    'https://unpkg.com/kidlat-css/css/kidlat.css'
  ]
}

Vue.use(VueHtmlToPaper, options);

// or, using the defaults with no stylesheet
Vue.use(VueHtmlToPaper);

component:

<template>
  <div>
    <!-- SOURCE -->
    <div id="printMe">
      <h1>Print me!</h1>
    </div>
    <!-- OUTPUT -->
    <button @click="print"></button>
  </div>
<template>

<script>
export default {
  data () {
    return {
      output: null
    }
  },
  methods: {
    print () {
      // Pass the element id here
      this.$htmlToPaper('printMe');
    }
  }
}
</script>

for more detail check: https://randomcodetips.com/vue-html-to-paper/

Upvotes: 9

Decade Moon
Decade Moon

Reputation: 34306

You need to copy over the styles from the original document. Try something like this:

// Get HTML to print from element
const prtHtml = document.getElementById('print').innerHTML;

// Get all stylesheets HTML
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=800,height=900,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();
WinPrint.close();

Upvotes: 39

Related Questions