Vue HTML to Paper

2.0.3 · maintenance · verified Sun Apr 19

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.

Common errors

```
TypeError: app.use is not a function
```
cause 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<...>'
```
cause 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!
```
cause 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
```
cause 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.

Warnings

breaking Version 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`.
gotcha When 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);`).
gotcha Local 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`.
gotcha Do 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);`
gotcha The `$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.

Install

npm install vue-html-to-paper npm
yarn add vue-html-to-paper yarn
pnpm add vue-html-to-paper pnpm

Imports

VueHtmlToPaper
wrong:
```
const VueHtmlToPaper = require('vue-html-to-paper');
```
correct:
```
import VueHtmlToPaper from '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
wrong:
```
import { $htmlToPaper } from 'vue-html-to-paper';
```
correct:
```
this.$htmlToPaper('print-area-id', printOptions, callback);
```
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
wrong:
```
Vue.directive('html-to-paper', ...);
```
correct:
```
<button v-html-to-paper="{ name: '_blank', styles: ['/styles/print.css'] }" @click="printMethod">Print Content</button>
```
The `v-html-to-paper` directive is automatically registered upon plugin installation and provides a declarative way to trigger print operations from elements.

Quickstart

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>

view raw JSON →