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
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.
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10@vue/compiler-sfc: ^3.0.5cross-env: ^7.0.3minimist: ^1.2.5postcss: ^8.2.3rollup: ^2.36.1rollup-plugin-postcss: ^4.0.0rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0vue: ^3.0.5jspdf: ^2.3.1jspdf-autotable: ^3.5.14