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

 

 

 

index.html

 

 

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

 

 

App.vue

 

 

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

<script>
	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' }
				})
			}
		}
  }
</script>

<style>
	#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;
	}
</style>

 

 

 

index.js

 

 

// 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',
  router,
  template: '<App/>',
  components: { App }
})

 

 

 

 

Leave a Reply