Print HTML In Vue.js – vue-html-to-paper

Install & Download:

# Yarn
$ yarn add vue-html-to-paper
# NPM
$ npm install vue-html-to-paper --save

Description:

This is a Vue mixin for paper printing HTML elements.

How to use it:

1. Import and install the vue-html-to-paper component.

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

2. Register the component.

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

3. In your app template:

<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>

4. Possible options.

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
}

Preview:

Changelog:

v2.0.3 (06/14/2023)

• update

v2.0.2 (06/08/2023)

• refactor: add support for vue version 3
• fix: various bugs

v1.4.4 (10/31/2021)

• refactor: update code formatting

v1.4.3 (06/29/2021)

• refactor: remove optional chaining

v1.4.2 (06/24/2021)

• refactor: new build

v1.4.1 (05/05/2021)

• chore: add new option windowTitle