Registry / web-framework / vue-html2canvas

vue-html2canvas

library0.0.4jsnpmunverified

vue-html2canvas is a Vue.js mixin designed for Vue 2 applications, providing a streamlined integration of the `html2canvas` library. This package facilitates the capture of HTML elements as images directly within Vue components by exposing a `$html2canvas` method on the Vue instance. With its last stable release at version `0.0.4`, published over seven years ago, the package is considered abandoned and is not compatible with Vue 3. Its purpose is to simplify the process of client-side rendering of DOM elements to a canvas or data URL, abstracting the direct `html2canvas` setup. While convenient for legacy Vue 2 projects, developers building new applications are advised to seek more modern, actively maintained alternatives that support Vue 3 and modern JavaScript practices.

web-framework

npm install vue-html2canvas

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-HTML2CANVAS

vue-html2canvas

web-frameworkjavascriptv0.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueHtml2Canvas

✓ import VueHtml2Canvas from 'vue-html2canvas';

✗ const VueHtml2Canvas = require('vue-html2canvas');

Used for installing the plugin with `Vue.use()` in Vue 2 applications.

$html2canvas

✓ this.$html2canvas(element, options);

✗ import { $html2canvas } from 'vue-html2canvas';

This is a mixin method added to the Vue instance, not a direct import. It's accessed via `this` within a component.

Demonstrates how to install `vue-html2canvas` as a Vue 2 plugin and use the `$html2canvas` method to convert a referenced DOM element into a data URL image, displaying it in the component.

import Vue from 'vue'; import VueHtml2Canvas from 'vue-html2canvas'; Vue.use(VueHtml2Canvas); export default { data() { return { output: null } }, methods: { async print() { const el = this.$refs.printMe; const options = { type: 'dataURL', // Example: Add a custom background color if the element has transparent areas backgroundColor: '#ffffff' } // Ensure the component is mounted before calling print if (el) { this.output = await this.$html2canvas(el, options); } else { console.error('Element to print not found.'); } } }, mounted() { // Automatically print on mount for demonstration this.print(); }, template: ` <div> <div ref="printMe" style="padding: 20px; border: 1px solid #ccc; background-color: #f9f9f9;"> <h1>Hello, Vue HTML2Canvas!</h1> <p>This content will be converted to an image.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <button @click="print">Re-print</button> </div> <div v-if="output"> <h2>Generated Image:</h2> <img :src="output" alt="Generated Image" style="max-width: 100%; border: 1px dashed #eee; margin-top: 20px;"/> </div> <div v-else> <p>Generating image...</p> </div> </div> ` }

Debug

Known issues

breakingThis package is designed for Vue 2 and is fundamentally incompatible with Vue 3. Vue 3 introduced breaking changes in its reactivity system, plugin registration, and component API, rendering this mixin non-functional.

fix

For Vue 3 projects, consider using a modern `html2canvas` wrapper specifically built for Vue 3, such as `vue3-html2canvas`, or integrating `html2canvas` directly using the Composition API.

affects: >=0.0.4

deprecatedThe package is effectively abandoned, with its last publish occurring over seven years ago. It lacks updates, bug fixes, or compatibility with newer JavaScript or Vue.js ecosystem standards.

fix

Avoid using in new projects. For existing projects, consider migrating to actively maintained alternatives or integrating `html2canvas` directly to gain control over its version and features.

affects: <=0.0.4

gotchaThe underlying `html2canvas` library has known limitations regarding rendering specific CSS properties (e.g., `background-image` on mobile, complex layouts), cross-origin images, and large canvas sizes. These limitations are inherited by `vue-html2canvas`.

fix

Review `html2canvas` documentation for common pitfalls. For cross-origin images, use a proxy server. For complex or large content, ensure `html2canvas` options are configured appropriately (e.g., `windowWidth`, `windowHeight`). Simplify CSS where rendering issues occur.

affects: >=0.0.1

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading '$html2canvas')

The `vue-html2canvas` plugin was not properly installed using `Vue.use(VueHtml2Canvas)` in a Vue 2 application's `main.js`, or the code is running in a Vue 3 environment.

fix

Ensure `import VueHtml2Canvas from 'vue-html2canvas'; Vue.use(VueHtml2Canvas);` is present in your Vue 2 application's entry file. If using Vue 3, this library is incompatible; migrate to a Vue 3 specific solution.

ReferenceError: await is not defined

The `print` method (or any method using `await this.$html2canvas`) is not declared as an `async` function.

fix

Declare the method as `async`: `async print() { ... await this.$html2canvas(...) }`.

Generated image is blank, incomplete, or incorrectly styled.

Common `html2canvas` issues related to browser rendering limits, cross-origin content (images, fonts), complex CSS (like `backdrop-filter`, newer Tailwind CSS color formats), or the element being off-screen/hidden.

fix

Check `html2canvas` documentation for troubleshooting. Ensure the element is visible on the DOM. Use `allowTaint: true` (with caution) or a proxy for cross-origin assets. For large elements, adjust `windowWidth`/`windowHeight` options. Simplify complex CSS that `html2canvas` may not fully support.

Upgrade

Version history

0.0.4latest on npm

Audit

Dependencies

html2canvasrequiredCore dependency for converting HTML elements to canvas/images. This package is a wrapper around html2canvas.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mycure-inc/vue-html2canvas ↗

packagehttps://www.npmjs.com/package/vue-html2canvas ↗