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

Related tags

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

... // 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 }}

Sample result

License

The MIT License

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

9 Dec 29, 2022

📅 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

2 Oct 20, 2022

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

6 Sep 4, 2022

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

2 Oct 18, 2022

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

1 Aug 12, 2021

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

767 Dec 30, 2022

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

39 Dec 15, 2022

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

28 Jul 31, 2022

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

1 Mar 20, 2022

💫 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.

47 Dec 27, 2022

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

0 Mar 4, 2021

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.

Vue Storefront - Headless PWA for any eCommerce Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommer

10.2k Jan 2, 2023

🚀🚀🚀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)

13.4k Jan 1, 2023

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.

0 Aug 14, 2022

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