# @eyelly/vue-printer

> A simple vue component for partial printing on the browser

Latest version **1.0.0** (published 2019-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @eyelly/vue-printer
pnpm add @eyelly/vue-printer
yarn add @eyelly/vue-printer
bun add @eyelly/vue-printer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-09-21 |
| First published | 2019-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eyelly Wu |
| Maintainers | eyelly |
| Keywords | vue, print, printer, vue-print, vue-printer |

## Links

- npm: https://www.npmjs.com/package/@eyelly/vue-printer
- Repository: https://github.com/eyelly-wu/react-printer
- Homepage: https://github.com/eyelly-wu/react-printer#readme
- Issues: https://github.com/eyelly-wu/react-printer/issues
- npm.io page: https://npm.io/package/@eyelly/vue-printer

## Dependencies (1)

- [@eyelly/print](https://npm.io/package/@eyelly/print.md) ^1.0.0

## Recent versions

- 1.0.0 (latest) — 2019-09-21
- 1.0.0-beta.pre.2 — 2019-09-15
- 1.0.0-beta.pre.1 — 2019-09-15
- 1.0.0-beta.pre.0 — 2019-09-15

## README

# 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
```javascript
<script src="https://unpkg.com/@eyelly/vue-printer/dist"></script>
```
Register the component
```
Vue.component('Printer',Printer)
```

## Usage & Example

**In single-file components**
```javascript
<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**
```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                      | -       |

## License

[MIT](https://github.com/eyelly-wu/vue-printer/blob/master/LICENSE)

---
_Source: https://npm.io/package/@eyelly/vue-printer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
