Vue Html2Canvas

This project References from vue-html2canvas

A html2canvas plugin for vue 3.x

Install

yarn add vue3-html2canvas

OR

npm install vue3-html2canvas

in main.(js|ts)

1import { createApp } from 'vue';
2import { Html2CanvasPlugin } from 'vue3-html2canvas';
3import App from './App.vue';
4
5const app = createApp(App);
6//...
7app.use(Html2CanvasPlugin);
8//...
9app.mount('#app');

Example

1<script setup>
2import { ref } from "vue";
3import { useHtml2Canvas } from "vue3-html2canvas";
4
5const html2canvas = useHtml2Canvas();
6const canvasTarget = ref(null);
7const containerShowCanvas = ref(null);
8async function onGenHtmlToCanvas() {
9  const canvas = await html2canvas(canvasTarget.value, { });
10  containerShowCanvas.value.appendChild(canvas)
11}
12</script>
13
14<template>
15  <button @click="onGenHtmlToCanvas" ref="canvasTarget">Click here for download demo pdf</button>
16  <div ref="containerShowCanvas" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
17    <span>Result Of Canvas </span>
18  </div>
19</template>
20
21<template>
22  <button @click="onGenPDF">Click here for download demo pdf</button>
23</template>

Documentation

Check html2canvas Documentation for more explanations!