# Vue HTML to Paper

## Demo <a href="#demo" id="demo"></a>

<https://mycurelabs.github.io/vue-html-to-paper/>

## Install <a href="#install" id="install"></a>

### **NPM**

```bash
npm install vue-html-to-paper
```

### **Yarn**

```bash
yarn add vue-html-to-paper
```

### **CDN**

```bash
https://unpkg.com/vue-html-to-paper/build/vue-html-to-paper.js
```

## Usage <a href="#usage" id="usage"></a>

### **main.js**

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#syntax).

### **component**

```html
<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 <a href="#withlocaloptions" id="withlocaloptions"></a>

You can also override the global config by passing local options that will only take effect to a certain print context.

```javascript
// local options are the same as the default global options
this.$htmlToPaper('printMe', { /* local options */ });
```

### Callback <a href="#callback" id="callback"></a>

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.

```javascript
this.$htmlToPaper('printMe', null, () => {
  console.log('Printing completed or was cancelled!');
});
```

## FAQ <a href="#faq" id="faq"></a>

### **How to print in landscape**

In the global option, you can pass a css with the following:

```css
@media print {
  @page {
    size: landscape
  }
}
```

Then, inject the custom css in the styles option like so:

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