Easy Component Printing Component - Paperizer

Install & Download:

# Yarn
$ yarn add paperizer
# NPM
$ npm i paperizer

Description:

A Vue composable that allows you to print components with styles from your Vue 3 projects.

How to use it:

1. Basic usage.

// Local
<script lang="ts" setup>
import { usePaperizer } from 'paperizer'
const { paperize } = usePaperizer('print-me')
const print = () => {
  paperize()
}
</script>
<template>
  <article>
    <div id="print-me">
      My document.
    </div>
    <button @click="print">Print</button>
  </article>
</template>

// Global
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Paperizer from 'paperizer'
createApp(App)
  .use(Paperizer)
  .mount('#app')
// in App.vue
<script>
export default {
  data() {
    return {
      message: 'My Document'
    }
  },
  methods: {
    print() {
      this.$paperize('print-me')
    }
  }
}
</script>
<template>
  <article>
    <div id="print-me">
      {{ message }}
    </div>
    <button @click="print">Print</button>
  </article>
</template>

2. Available options.

const defaultTarget = '_blank'
const defaultFeatures = ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes']
const defaultWindowTitle = window.document.title
const defaultAutoClose = true
const defaultAutoPrint = true