how to use vue html to paper

Solutions on MaxInterview for how to use vue html to paper by the best coders in the world

showing results for - "how to use vue html to paper"
Francisco
15 Aug 2020
1how to print in vue js use vue-html-to-paper
2npm install vue-html-to-paper
3import Vue from 'vue';
4import VueHtmlToPaper from 'vue-html-to-paper';
5
6const options = {
7  name: '_blank',
8  specs: [
9    'fullscreen=yes',
10    'titlebar=yes',
11    'scrollbars=yes'
12  ],
13  styles: [
14    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
15    'https://unpkg.com/kidlat-css/css/kidlat.css'
16  ]
17}
18
19Vue.use(VueHtmlToPaper, options);
20
21// or, using the defaults with no stylesheet
22Vue.use(VueHtmlToPaper);
23component:
24<template>
25  <div>
26    <!-- SOURCE -->
27    <div id="printMe">
28      <h1>Print me!</h1>
29    </div>
30    <!-- OUTPUT -->
31    <button @click="print"></button>
32  </div>
33<template>
34
35<script>
36export default {
37  data () {
38    return {
39      output: null
40    }
41  },
42  methods: {
43    print () {
44      // Pass the element id here
45      this.$htmlToPaper('printMe');
46    }
47  }
48}
49</script>