vue-printer's Introduction

Vue-Printer

Vue-Printer is a simple vue component for partial printing on the browser

Installation

NPM

Install the npm package, register the component

import Vue from 'vue'
import Printer from '@eyelly/vue-printer'

Vue.component('Printer',Printer)

CDN

Include the source file

<script src="https://unpkg.com/@eyelly/vue-printer/dist"></script>

Vue.component('Printer',Printer)

Usage & Example

In single-file components

<template>
  <div>
    <div ref="printContent"> this is content to print </div>
    <div> this is normal content </div>
    <Printer :content="content">
      <button>print</button>
    </Printer>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    computed: {
      content() {
        return {
          refs: this.$refs,
          refName: 'printContent'
        }
      }
    }
  }
</script>

<style>
</style>

In HTML

<!doctype html>
<html>

  <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/@eyelly/vue-printer/dist"></script>
  </head>

  <body>
    <div id="app">
      <div ref='printContent'> this is content to print </div>
      <div> this is normal content </div>
      <Printer :content="content">
        <button>print</button>
      </Printer>
    </div>
    <script>
      Vue.component('Printer', Printer)
      new Vue({
        el: '#app',
        computed: {
          content() {
            return {
              refs: this.$refs,
              refName: 'printContent'
            }
          }
        }
      })
    </script>
  </body>

</html>

API

Property	Description	Type	Default
content	content to be printed	{refs:object,refName:string}	-
shotcut	enable browser printing shortcut	boolean	true
newWindow	open a new window to print	boolean	false
title	the title of the newly opened window	boolean	-