Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

jsPDF Vue.js Project to Generate Dynamic PDF from Input Form in Browser Using Javascript

Posted on December 17, 2022

 

 

Welcome folks today in this blog post we will be generating dynamic pdf from input form using jspdf in browser using vue.js and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below jspdf library using the below command

 

 

npm i jspdf

 

 

And after that you need to edit the App.vue file and copy paste the following code

 

 

App.vue

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <input type="text" v-model="name" placeholder="Enter text"/>
  <button @click="generatePDF">Generate PDF</button>
</template>
 
<script>
import jspdf from 'jspdf'
export default {
  name: "App",
  methods:{
    generatePDF(){
      let doc = new jspdf()
      doc.text(this.name,10,10)
      doc.save("output.pdf")
    }
  }
};
</script>

 

 

As you can see in the above vue component we have got a simple html5 button and a simple input field in the template. And we have binded a onclick listener method called generatePDF() which we need to define in the javascript. Inside this method we are first of all importing the jspdf library and then we are adding the text using the text() method and inside it we are passing the static text to export to pdf document and then we are giving the x and y coordinates. And then we are saving the pdf document with the filename called output.pdf

 

 

 

Recent Posts

  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Android Java Tutorial to Change Styles & Visibility of System Bars (Top, Action & Status) Full Example
  • Android Java Project to Display & Play Audio Files From Storage inside ListView Using MediaPlayer Class
  • Android Java Project to Build MP4 Video to MP3 Audio Converter Using MediaMuxer Class
  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme