vue-html2canvas

Vue mixin for Html2Canvas

Showing:

Popularity

Downloads/wk

3.8K

GitHub Stars

99

Maintenance

Last Commit

1yr ago

Contributors

5

Package

Dependencies

1

Size (min+gzip)

41.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Canvas

Readme

Vue Html2Canvas

Vue mixin for Html2Canvas

Install

npm install vue-html2canvas

Or

yarn add vue-html2canvas

Usage

main.js

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

Vue.use(VueHtml2Canvas);

component

<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 ❤️ by Jofferson Ramirez Tiquez

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial