# Vue HTML2Canvas

## Vue Html2Canvas

Vue mixin for [Html2Canvas](https://html2canvas.hertzen.com/)

## Install

### npm

```
npm install vue-html2canvas
```

### yarn

```
yarn add vue-html2canvas
```

## Usage

### **main.js**

```javascript
import Vue from 'vue';
import VueHtml2Canvas from 'vue-html2canvas';

Vue.use(VueHtml2Canvas);
```

### **component**

```html
<template>
  <div>
    <!-- SOURCE -->
    <div ref="printMe" style="padding: 10px; background: #f5da55">
      <h1 style="color: #000; ">Print me!</h1>
    </div>
    <!-- OUTPUT -->
    <img :src="output">
  </div>
</template>

<script>
export default {
  data() {
    return {
      output: null
    }
  },
  methods: {
    async print() {
      const el = this.$refs.printMe;
      // add option type to get the image version
      // if not provided the promise will return 
      // the canvas.
      const options = {
        type: 'dataURL'
      }
      this.output = await this.$html2canvas(el, options);
    }
  },
  mounted() {
    this.print()
  }
}
</script>
```

Made with <img src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png" alt="heart" data-size="line"> by Joff Tiquez