Vue.js HTML2PDF.js Tutorial to Export Text & Images to PDF Document Using jsPDF & html2canvas Library in Browser Using TypeScript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments



npm i html2pdf.js







<div id="app"></div>






	<div id="app" ref="document">
		<img width=200 src="./assets/logo.png">
		<button @click="exportToPDF">Export to PDF</button>

	import html2pdf from 'html2pdf.js'
	export default {
    name: 'app',
		methods: {
			exportToPDF () {
				html2pdf(this.$refs.document, {
					margin: 1,
					filename: 'document.pdf',
					image: { type: 'jpeg', quality: 0.98 },
					html2canvas: { dpi: 192, letterRendering: true },
					jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' }

	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;







// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }





Leave a Reply