# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://oss.mycure.md/vue-html-to-paper/vue-html-to-paper.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.