Vue HTML to Paper

Vue mixin for paper printing html elements.

Demo
​https://mycurelabs.github.io/vue-html-to-paper/​
Install
NPM
npm install vue-html-to-paper
Yarn
yarn add vue-html-to-paper
CDN
https://unpkg.com/vue-html-to-paper/build/vue-html-to-paper.js
Usage
main.js
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'
  ],
  timeout: 1000, // default timeout before the print window appears
  autoClose: true, // if false, the window will not close after printing
  windowTitle: window.document.title, // override the window title
}
​
Vue.use(VueHtmlToPaper, options);
​
// or, using the defaults with no stylesheet
Vue.use(VueHtmlToPaper);
See window.open API here.
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: {
    async print () {
      // Pass the element id here
      await this.$htmlToPaper('printMe');
    }
  }
}
</script>
With local options
You can also override the global config by passing local options that will only take effect to a certain print context.
// local options are the same as the default global options
this.$htmlToPaper('printMe', { /* local options */ });
Callback
While the this plugin supports async await, the callback function is also available.
Use the callback function to be notified when printing has been completed (whether or not it was successful). The callback method is not required.
Notes
When using callback, be aware that there's now a 2nd parameter for local options. So the callback will be the 3rd parameter. Pass null as 2nd argument if you don't want to override the global options.
this.$htmlToPaper('printMe', null, () => {
  console.log('Printing completed or was cancelled!');
});
FAQ
How to print in landscape
In the global option, you can pass a css with the following:
@media print {
  @page {
    size: landscape
  }
}
Then, inject the custom css in the styles option like so:
const options = {
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    './path/to/custom.css' // <- inject here
  ]
}
This can also be done by using the local option.
Made with ❤️ by Joff Tiquez

Last modified 1yr ago