vue-print

vue-print

by Yerko Palma

HTML

<!-- component template -->
<script type="text/x-template" id="v-print">
  <div id='printable' :class="{ 'print-only': !this.visible }"><slot></slot></div>
</script>

<div id="app">
  <p>
    not printable
  </p>
  <v-print :visible="false">
    <h1>Printable Test</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vulputate lorem ac arcu ultrices porttitor.
    </p>
    <h1 v-print-only>
    include this one
    </h1>
    <h1 v-print-exclude>
    exclude this one
    </h1>
  </v-print>
  <button @click="print">Print</button>
</div>

CSS

@media print {
  body * {
    visibility: hidden;
  }
  #printable, #printable * {
    visibility: visible;
  }
  #printable {
    position: absolute;
    left: 0;
    top: 0;
  }
  #printable .print-only {
    visibility: visible;
    display: block;
  }
  #printable .print-exclude {
    visibility: hidden;
    display: none;
  }
}

@media not print {
  .print-only {
    display: none;
  }
}

JavaScript

var VuePrint = Vue.extend({
	template: "#v-print",
  props: {
  	visible: {
    	type: Boolean,
      default: true
    }
  }
})

Vue.component('v-print', VuePrint)

Vue.directive('print-only', {
	bind: function () {
  	var className = 'print-only'
   	if (this.el.classList)
     	this.el.classList.add(className)
   	else
     	this.el.className += ' ' + className
  }
})

Vue.directive('print-exclude', {
	bind: function () {
  	var className = 'print-exclude'
   	if (this.el.classList)
     	this.el.classList.add(className)
   	else
     	this.el.className += ' ' + className
  }
})

new Vue({
	el: '#app',  
  methods: {
  	print: function () {
    	window.print()
    }
  }
})