1. jspdf-autogenerator

jspdf-autogenerator

jspdf-autogenerator

NPM - Package - For Downloading PDF (Vue JS)

Dependency - JSPDF and JSPDF AutoTable

Installing through CLI

npm i jspdf-autogenerator

Importing package in the project file

import JspdfAutogenerator from 'jspdf-autogenerator'

Registering the package under component

components: {
   JspdfAutogenerator,
 }

Calling the Components in the template

 <template>
  <div>
    <jspdf-autogenerator/>
  </div>
</template>
Output - Basic PDF

image

Properties

'generatedXCordinate',
'generatedYCordinate'

Line Space

  • Default value set to be as 3
  • Property Name = generatedPdfLineSpace
    For Adding Customize Value Add following code
<jspdf-autogenerator 
:generatedPdfLineSpace="4"/>

Section Space

  • Default Value set to be as 5
  • Property Name = generatedSectionSpace
    For Adding Customize Value Add following code
<jspdf-autogenerator 
  :generatedSectionSpace="10"/>

Starting Point (X and Y Cordinate)

  • Default Value for X-Cordinate = 15
  • Default Value for Y-Cordinate = 20
  • Property Name for X-Cordinate = generatedXCordinate
  • Property Name for Y-Cordinate = generatedYCordinate

For Adding Customize Value Add following code

<jspdf-autogenerator 
  :generatedXCordinate="10"
  :generatedYCordinate="30"/>

Paragraph

para2: {
      type: "paragraph",
      paraData: "Please Enter the paragraph details and it will display the data in the form of paragraph.",
      paraStyle: {
      color: 'red',
      textSize: 20,
    }
    }
    
  • Property Name = generatedPdfData
  • type = "paragraph" (Keyword for writing paragraph in PDF)
  • paraData = Here goes the content of the paragraph. A paragraph should be of minimum one line
  • paraStyle = where we can set the style of the paragraph like Color, textSize(Font Size) for that particular paragraph

Header

 header1: {type: "header",
    mainHeading:"This is Main Heading",
    subHeading: "This is sub heading",
    horizontalMargin: true,
    mainHeadingFontSize: 15,
    subHeadingFontSize: 10,
    headingStyle: {align: 'center'},
    headerOnEachPage: true
    }

Header Mainly Contain two heading in this current version i.e Heading and Sub Heading

  • Property Name = generatedPdfheader
  • mainHeading = "Main Heading Title goes Here"
  • subHeading = "Sub Heading Title Goes Here"
  • horizontalMargin = Set this property to true if user wants to draw the line after adding header
  • mainHeadingFontSize = set this property if you want to customize main Heading size
  • subHeadingFontSize = set this property if you want to customize sub heading font size
    -headerOnEachPage = set this flag to true if you want to add headers on each page
  • headerStyle = Use this property to align the text various options available are
    • center
    • left
    • right
    • justify

Footer

footer:{
      addFooter: true,
      addPageRight: true,
      addTextLeft: "Footer Extra Text (Eg-Document Name) goes here",
      footerTextSize: 8
    }
  • Property Name = generatedPdffooter
  • addFooter = set this flag to true if user wants to display footer
  • footerTextSize = user can customize the size of the footer data
  • addPageRight = this property set true if user wants to add page number at the right of the page
  • addPageLeft = this property set true if user wants to add page number at the left of the page
  • addTextLeft = Random Text can be added (eg: Document Name) at the left of the page.
  • addTextRight= Random Text can be added (eg: Document Name) at the right of the page.