Export/Download Vue3 using html2pdf.js. Easy to custom any pdf style because it is exported from real HTML.

Related tags

PDF html2pdf vue3
Overview

vue3-simple-html2pdf

  • Export and auto download PDF using vue3 and html2pdf.js.
  • Easy to custom any PDF style because it will be export from real html.
  • Can use custom css style for pdf page using vue style.

Example sanbox code

https://codesandbox.io/s/vue3-simple-html2pdf-jxy2uz

Install

npm install --save vue3-simple-html2pdf

or yarn

yarn add vue3-simple-html2pdf

Register component

import Vue3SimpleHtml2pdf from "vue3-simple-html2pdf";
Vue.use(Vue3SimpleHtml2pdf);

Use component

HTML Table

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
1
... // Props pdfOptions = { margin: 15, image: { type: 'jpeg', quality: 1, }, html2canvas: { scale: 3 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'p', }, }, exportFilename: 'my-custom-file.pdf', ... ">

  

HTML Table

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
1
... // Props pdfOptions = { margin: 15, image: { type: 'jpeg', quality: 1, }, html2canvas: { scale: 3 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'p', }, }, exportFilename: 'my-custom-file.pdf', ...

Call start download pdf

this.$refs.vue3SimpleHtml2pdf.download()

To break page, use html2pdf__page-break

">

To add page number, use html2pdf__page-number

{{ pageNumber }}
">
{{ pageNumber }}

Sample result

alt text

License

The MIT License

You might also like...
PDF viewer component for Vue 2 and Vue 3

📄 pdf-viewer-vue PDF viewer component for Vue 2 and Vue 3 Compatibility This package is compatible with both Vue 2 and Vue 3. The default exported bu

📅 Proplanner is easy way to prepare a weekly schedule. You can export your schedule as a PDF file!

📅 Proplanner Proplanner is easy way to prepare a weekly schedule. You can export your schedule as a PDF file! Visit live Technologies Frontend: Tailw

A simple and free tool to create timelines. Using JSON files and export it to PDF.
A simple and free tool to create timelines. Using JSON files and export it to PDF.

Timeline Maker A simple tool to make timelines and export them as JSON or PDF. Click here to try it! Project setup npm install Compiles and hot-reloa

A font picker made in Vue exported as a vue + web component to be used in any framework of choice

A font picker made in Vue exported as a vue + web component to be used in any framework of choice

Export charts created by vue-chartjs to PDF files
Export charts created by vue-chartjs to PDF files

vue-chartjs-exporter Export charts created by vue-chartjs to PDF files. Demo here. Read the Requirements section below before proceeding, because it c

A PDF viewer for Vue using Mozilla's PDF.js

Pdfvuer A PDF viewer for Vue using Mozilla's PDF.js Install npm install --save pdfvuer Example - basic template pdf src="./static/relativity.pdf

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

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

Reusable component to add spaced-repetition based flashcard to any webpage. No servers required because user's progress remains in localStorage.
Reusable component to add spaced-repetition based flashcard to any webpage. No servers required because user's progress remains in localStorage.

flashcard VueJS components to add spaced-repetition based flashcard to any webpage. Less than 5KB gzipped, and 15KB unzipped. Demo: https://nilesh.tri

A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.
A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

💫 Awesome module to generate PDF files and manage PDF inyour Nuxt application.

Generate PDF files directly from your content on your website, can be used for offline downloadable documentation pages.

A simple pdf viewer based on mozilla's PDF.js

A simple pdf viewer based on mozilla's PDF.js

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license. 🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

This app is used to record keyboard or mouse events, during which the keyboard or mouse events can be exported as a file with a toca suffix
This app is used to record keyboard or mouse events, during which the keyboard or mouse events can be exported as a file with a toca suffix

This app is used to record keyboard or mouse events, during which the keyboard or mouse events can be exported as a file with a toca suffix. And read this file through the playback function of this app for playback and reproduction.

Easy implementation of real-time communication using WebRTC by using Firebase

Easy implementation of real-time communication using WebRTC by using Firebase

IP location finder ( not 100% accurate because of problems from API services)

ip-tracker Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lint

Spotify Wrapped but for YouTube (Because Rewind sucked).
Spotify Wrapped but for YouTube (Because Rewind sucked).

YouTube Wrapped 🎁 Spotify Wrapped but for YouTube. (Because Rewind sucked). Inspired by the Waveform podcast. How to use Request your data from Googl

Vue - HTML - Puppeteer PDF rendering service

Vue - HTML - Puppeteer PDF rendering service

Convert HTML DOM Element to PDF

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

Comments
  • Can't install

    Can't install

    node_modules/vue3-simple-html2pdf/src/index.js:1:31: error: Could not resolve "vue3-simple-html2pdf/src/vue3-simple-html2pdf" (mark it as external to exclude it from the bundle) 1 │ import Vue3SimpleHtml2pdf from 'vue3-simple-html2pdf/src/vue3-simple-html2pdf' ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    opened by mstrade 1
Releases(0.0.7)
Owner
Sango Technologies Inc
Sango Technologies Inc
A PDF viewer for Vue using Mozilla's PDF.js

Pdfvuer A PDF viewer for Vue using Mozilla's PDF.js Install npm install --save pdfvuer Example - basic <template> <pdf src="./static/relativity.pdf

Gaurav Koley 756 Nov 28, 2022
A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

A small electron based pdf reader to test out the capabilities of Vue.js, Electron and PDF.js.

null 1 Mar 20, 2022
A simple pdf viewer based on mozilla's PDF.js

A simple pdf viewer based on mozilla's PDF.js

Caligares Miguel Augusto 0 Mar 4, 2021
Vue -> HTML -> Puppeteer PDF rendering service

Vue -> HTML -> Puppeteer PDF rendering service

MOLGENIS - open source solutions for scientific data 1 Jul 23, 2021
vue.js pdf viewer

vue-pdf vue.js pdf viewer Install npm install --save vue-pdf Example - basic <template> <pdf src="./static/relativity.pdf"></pdf> </template> <scri

Franck Freiburger 1.9k Nov 22, 2022
PDF embed component for Vue 2 and Vue 3

This package is compatible with both Vue 2 and Vue 3, but is delievered in separate builds. Use dist/vue2-pdf-embed.js for Vue 2 and dist/vue3-pdf-embed.js for Vue 3. The default export of the package is for Vue 3.

Aliaksei Hrynko 158 Nov 29, 2022
it`s a pdf viewer base on pdfjs

it`s a pdf viewer base on pdfjs

Yang Wangwang 2 Nov 1, 2019
Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

Vue Pdf Renderer is a component that allows you to render PDFs from file uploads in most modern browsers

Eddie A. Rodriguez 0 Jan 28, 2020
Annotation layer for pdf.js in vue

Annotation layer for pdf.js in vue

null 1 Jan 26, 2021
A Vue.js wrapper component for PDF.js

vue-pdfjs-wrapper A simple Vue.js wrapper component for PDF.js. Note This component installs and uses pdfjs-dist, and loads its worker using the worke

Niv Guler 1 Mar 6, 2022