Registry / web-framework / vue-html-to-paper

vue-html-to-paper

library2.0.3jsnpmunverified

Vue HTML to Paper is a plugin for Vue.js applications, primarily designed for Vue 3 (version 2.x), which provides functionality to print specific HTML elements to paper. It offers a convenient way to print custom content sections of a webpage, bypassing the default browser print behavior for entire pages. The plugin integrates into a Vue application by registering a global method, `$htmlToPaper`, accessible from any component, and can also be used via a `v-html-to-paper` directive. It supports comprehensive print customization, including setting window names, specific print window features (like fullscreen or scrollbars), and the inclusion of external stylesheets for consistent styling in print output. While the current stable version 2.0.3 is built for Vue 3, a version 1.x branch exists for Vue 2 applications, though its support is now considered low priority. The package's release cadence is irregular, with the latest major update (2.0.3) published approximately three years ago, suggesting a maintenance rather than active feature development phase. It ships with TypeScript types, aiding developers in building type-safe Vue projects.

web-framework

npm install vue-html-to-paper

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-HTML-TO-PAPER

vue-html-to-paper

web-frameworkjavascriptv2.0.3

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.

VueHtmlToPaper

✓ import VueHtmlToPaper from 'vue-html-to-paper';

✗ const VueHtmlToPaper = require('vue-html-to-paper');

The default export is the plugin itself, used with `app.use()` in Vue 3. CommonJS `require` is generally incorrect for modern Vue 3 projects which are ESM-first.

$htmlToPaper

✓ this.$htmlToPaper('print-area-id', printOptions, callback);

✗ import { $htmlToPaper } from 'vue-html-to-paper';

The `$htmlToPaper` method is globally injected into Vue component instances after the plugin is installed. It is not directly imported.

v-html-to-paper directive

✓ <button v-html-to-paper="{ name: '_blank', styles: ['/styles/print.css'] }" @click="printMethod">Print Content</button>

✗ Vue.directive('html-to-paper', ...);

The `v-html-to-paper` directive is automatically registered upon plugin installation and provides a declarative way to trigger print operations from elements.

Demonstrates how to install `vue-html-to-paper` as a Vue 3 plugin and use the injected `$htmlToPaper` method in a component to print a specific HTML element with custom styles and options.

import { createApp } from 'vue'; import App from './App.vue'; import VueHtmlToPaper from 'vue-html-to-paper'; const app = createApp(App); const options = { name: '_blank', specs: [ 'fullscreen=yes', 'titlebar=yes', 'scrollbars=yes' ], styles: [ 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', '/my-custom-print-styles.css' // Ensure this path is correct and accessible from /public or build output ], timeout: 1000, // default timeout before the print window appears autoClose: true, // if false, the window will not close after printing windowTitle: 'Custom Print Title' }; app.use(VueHtmlToPaper, options); app.mount('#app'); // In a Vue component (e.g., App.vue): <template> <div> <div id="print-content"> <h1>Document to Print</h1> <p>This is the content that will be sent to the printer.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </div> <button @click="printContent">Print this section</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'PrintExample', methods: { printContent(): void { this.$htmlToPaper('print-content', { name: 'my-custom-print-job', styles: ['/additional-component-styles.css'] }, () => { console.log('Printing finished or cancelled'); }); } } }); </script>

Debug

Known issues

breakingVersion 2.x of `vue-html-to-paper` is designed exclusively for Vue 3. For Vue 2 applications, you must use version 1.x (specifically v1.4.5 or earlier). Attempting to use v2.x with Vue 2 will result in runtime errors due to fundamental API differences.

fix

For Vue 2 projects, install `vue-html-to-paper@^1.0.0` (e.g., `npm install vue-html-to-paper@1.4.5`). For new Vue 3 projects, ensure you are using `vue-html-to-paper@^2.0.0`.

affects: >=2.0.0

gotchaWhen migrating from Vue 2 to Vue 3, the plugin installation syntax changes from `Vue.use()` to `app.use()`. Using the old `Vue.use()` in a Vue 3 application will fail.

fix

Replace `Vue.use(VueHtmlToPaper, options)` with `app.use(VueHtmlToPaper, options)` where `app` is your Vue 3 application instance (e.g., `const app = createApp(App);`).

affects: >=2.0.0

gotchaLocal stylesheets provided in the `styles` option (e.g., `/my-custom-print-styles.css`) might not load correctly if they are not placed in the `public` directory of your project (for Webpack or Vite-based builds). The build process often ignores `src` assets for direct public access.

fix

Ensure all local CSS files specified in `options.styles` are located in your project's `public` directory (or its equivalent) so they are directly accessible via their URL in the browser's print window. For example, if your file is at `public/css/print.css`, reference it as `/css/print.css`.

affects: *

gotchaDo not attempt to register multiple Vue plugins within a single `app.use()` (or `Vue.use()`) call. Each plugin must be installed separately.

fix

If you have multiple plugins, install them individually:
`app.use(VueRouter);
app.use(VueHtmlToPaper, options);`
Avoid: `app.use(VueRouter, VueHtmlToPaper, options);`

affects: *

gotchaThe `$htmlToPaper` method and `v-html-to-paper` directive are only available after the plugin has been installed on the Vue application instance. Attempting to access them before installation or outside of a Vue component context will result in undefined errors.

fix

Ensure `app.use(VueHtmlToPaper, options)` (for Vue 3) is called before your root Vue component is mounted, and always access `$htmlToPaper` using `this.$htmlToPaper` within component methods.

affects: *

Errors

Common errors & fixes

TypeError: app.use is not a function

Attempting to install the plugin using `app.use()` in a Vue 2 project, or using `Vue.use()` in a Vue 3 setup where `app` is not a Vue application instance.

fix

For Vue 3, ensure `app` is a `createApp()` instance and the plugin is correctly imported. For Vue 2, use `Vue.use(VueHtmlToPaper, options);` and install `vue-html-to-paper@^1.0.0`.

Property '$htmlToPaper' does not exist on type 'ComponentPublicInstance<...>'

The `vue-html-to-paper` plugin has not been correctly installed on the Vue application instance, or TypeScript isn't aware of the injected global property.

fix

Verify that `app.use(VueHtmlToPaper, options)` is called in your `main.ts` (or `main.js`). For TypeScript, you may need to declare the global property in a declaration file (e.g., `shims-vue.d.ts`): `declare module 'vue' { interface ComponentCustomProperties { $htmlToPaper: (el: string, options?: object, callback?: Function) => void; } }`

Element to print #my-element-id not found!

The element ID passed to `$htmlToPaper` (or referenced by the directive) does not exist in the DOM when the print function is called.

fix

Ensure the target HTML element has a unique and correct `id` attribute, and that the element is rendered and available in the DOM before `$htmlToPaper` is invoked.

Module parse failed: Unexpected token

Attempting to use CommonJS `require()` syntax in an ESM-only Vue 3 project, or a misconfiguration of module resolvers.

fix

Always use ES Module `import VueHtmlToPaper from 'vue-html-to-paper';` in modern Vue 3 projects.

Upgrade

Version history

2.0.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue.js framework integration.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mycure-inc/vue-html-to-paper ↗

packagehttps://www.npmjs.com/package/vue-html-to-paper ↗