Convert HTML DOM Element to PDF

Overview

dom-pdf

Convert HTML DOM Element to PDF. You can save a specified element as PDF File, print it directly, or preview as PDF.

Work by '996', sick in ICU. Keep your work-life balance, be a developer with happiness!

996.icu 996.icu MIT

Install

npm install --save dom-pdf

Usage

To use Printer class:

import { Printer } from 'dom-pdf';

const printer = new Printer();

printer.init(element, options).then(() => {
  printer.print();
  printer.preview();
  printer.save();
});

To use Vue plugin:

import { VuePlugin } from 'dom-pdf';

Vue.use(VuePlugin);

In your Vue component:

this.$print(element, options);
this.$previewPDF(element, options);
this.$savePDF(element, options);

Options

Option Description
orientation Paper orientation. Valid values: ['portrait', 'landscape']. Defaultly set to 'portrait'.
pageSize Paper size Valid values: ['a0' ~ 'a10', 'b0' ~ 'b10', 'c0' ~ 'c10', 'dl', 'letter', 'government-letter' 'legal' 'junior-legal' 'ledger' 'tabloid' 'credit-card']. Defaultly set to 'a4'.
pageMargin Page margin. Defaultly set to 30.
scale Scale. Defaultly set to 2.
You might also like...
A Vue.js plugin that affixes an element on the window while scrolling based on a relative element

Affixes an element on the screen based on a relative element Unlike other plugins, this Vue 2 component will make it easy to affix any element while s

Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)

vue-cron-generator a project using vue,element-ui to generate cron expression 中文 Online demo Used by 👉 Attemper: A distributed,multi-tenancy,job-flow

Let users control your Vue app using AI and their camera in just 1 line of HTML!

Vue Camera Gestures Let users control your Vue app using AI, their camera, and gestures of their choice in just 1 line of HTML! Demo and full document

Applications for any device with HTML, CSS and JavaScript - free and open source!
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

A Vue directive which renders sanitised HTML dynamically

vue-safe-html A Vue directive which renders sanitised HTML dynamically. Zero dependencies, compatible with Vue versions 3 and 2, TypeScript-ready. Ins

MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS
MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS

MKTemplate A beautiful UI . Start your Web Site with this bootstrap and VueJS UI . MKTemplate is Free and Open Source. It features multiple HTML and V

Proyecto Ejemplo with HTML 5 + CSS3 + VUE JS

appcom360 Aplicacion para generar los archivos planos Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm ru

Vue sample project to display an ESPN RSS feed as HTML

vue-rss-espn Project overview I built this project to learn Vue development. It accesses the ESPN NFL RSS feeds using a proxy to translate xml to json

Agnosticui - a set of UI primitives that start their lives in clean HTML and CSS
Agnosticui - a set of UI primitives that start their lives in clean HTML and CSS

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CS

Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.

vue3-touch-events Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x. The easiest way to make your inte

Robin Rodricks 95 Sep 23, 2022
PDF Reader for Vue 3 using Mozilla's PDF.js

PDF Reader for Vue 3 using Mozilla's PDF.js

Randolph Tellis 32 Sep 27, 2022
Vue component to trap the focus within a DOM element

focus-trap-vue Vue component to trap the focus within a DOM element Installation For Vue 2 npm install focus-trap focus-trap-vue For Vue 3 npm install

Eduardo San Martin Morote 157 Sep 16, 2022
Detect DOM element resizing based on Vue3.x

Detect DOM element resizing based on Vue3.x

null 0 Jul 22, 2021
A Vue.js 2 component to clone DOM elements

vue-cloneya A vue component to clone DOM elements Live demo here Install yarn add vue-cloneya # or npm i vue-cloneya Import import Vue from 'vue'

Rida Amirini 15 Aug 27, 2022
An escape hatch for DOM Elements in Vue.js components.

vue-dom-portal An escape hatch for DOM Elements in Vue.js components. The directive v-dom-portal will move DOM Nodes from their current place in a Vue

Caleb Roseland 201 Sep 29, 2022
A vue directive to keep dom ratio

vue-keep-ratio [中文项目介绍] As there comes a new css attribute: aspect-ratio, I picked up my old work vue-keep-ratio, use a more adaptive (but hack) way t

Aiello 6 Sep 13, 2021
A directive-supported plugin for transfering DOM to another location in Vue.js components

A directive-supported plugin for transfering DOM to another location in Vue.js components

Emil Zhai 1 Jul 13, 2019
Resize the font-size in rem units so that the text fits into the html element.

v-fit2box directive for Vue3 Resize the font-size in rem units so that the text fits into the html element. In other words the font size is smaller fo

null 1 Jan 19, 2022
Prints a specific area/element of your html page for any frontend framework

Prints a specific area/element of your html page for any frontend framework

Trinmar Boado 12 Sep 24, 2022