Skip to content

WebNinjaDeveloper.com

Programming Tutorials




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

Vue.js jsPDF Project to Export HTML to PDF Document in Browser Using Javascript

Posted on December 17, 2022

 

 

Welcome folks today in this blog post we will be exporting html to pdf document using jspdf library and vue.js in 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
<template>
  <button @click="generatePDF">Generate PDF</button>
</template>
 
<script>
import jspdf from 'jspdf'
export default {
  name: "App",
  methods:{
    generatePDF(){
      let doc = new jspdf()
      doc.text("hello world",10,10)
      doc.save("output.pdf")
    }
  }
};
</script>

 

 

As you can see in the above vue component we have got a simple html5 button 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

  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • 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