-
-
Save johnkingzy/e4c081362e7f7d0709536baf636b6b7b to your computer and use it in GitHub Desktop.
A ref for jspdf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { PureComponent } from 'react'; | |
import { Button, } from 'antd'; | |
// npm i jspdf | |
import jsPDF from 'jspdf' | |
// npm i jspdf-autotable | |
import 'jspdf-autotable'; | |
export default class pdfGenerate extends PureComponent { | |
constructor(props){ | |
super(props) | |
this.state ={ | |
array1: [....] | |
} | |
} | |
// JSpdf Generator For generating the PDF | |
jsPdfGenerator = () => { | |
let data = []; | |
let col = [ | |
{ dataKey: 'count', header: 'Count' }, | |
{ dataKey: 'c1', header: 'C1' }, | |
{ dataKey: 'c2', header: 'C2' }, | |
{ dataKey: 'c3', header: 'C3' }, | |
{ dataKey: 'c4', header: 'C4' }, | |
], | |
let count = 1; | |
var doc = new jsPDF('p', 'pt'); | |
doc.page=1; | |
var width = doc.internal.pageSize.getWidth(); | |
var height = doc.internal.pageSize.getHeight(); | |
var header = function () { | |
var imgData = // Convert the image to base64 and place it here // | |
doc.setFontStyle('normal'); | |
// move_from_left, move_from_height, width, height | |
doc.addImage(imgData, 'JPEG', 5, 10, width-10, 65) | |
doc.setFontSize(14); | |
doc.setFontStyle('bold'); | |
// move_from_left, move_from_height | |
doc.text(200, 100, 'Something something') | |
}; | |
var footer = function () { | |
var imgData = // Convert the image to base64 and place it here // | |
//print number bottom right | |
doc.setFontSize(7); | |
doc.text(width-40, height - 30, 'Page - ' + doc.page); | |
doc.page ++; | |
//_________________________________ | |
doc.addImage(imgData, 'JPEG', 5, height - 25, width-10, 30) | |
}; | |
var options = { | |
beforePageContent: header, | |
afterPageContent: footer, | |
theme: 'grid', | |
columnStyles: { | |
count: {columnWidth: 30, }, | |
c1: {columnWidth: 50}, | |
c2: {columnWidth: 80}, | |
c3: {columnWidth: 30}, | |
c4: {columnWidth: 50, halign: 'right'}, | |
}, | |
headStyles: {fillColor: 'white', textColor: 'black'}, | |
style: {cellWidth: 'auto'}, | |
margin: {top: 150, bottom: 100, horizontal: 10}, | |
} | |
// Data Processing | |
this.state.array1.map( (item, index) => { | |
let b = { | |
count: count, | |
c1: item.c1, | |
c2: item.c2, | |
c3: item.c3, | |
c4: item.c4, | |
} | |
count++; | |
data.push(b); | |
}) | |
doc.setFontSize(12) | |
doc.line(0, 145, width, 145) | |
doc.autoTable(col, data, options) | |
doc.save('Generate.pdf') | |
} | |
render(){ | |
return( | |
<Button onClick={this.jsPdfGenerator} type="primary"> Generate PDF </Button> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment