How to use jspdf - 10 common examples
To help you get started, we’ve selected a few jspdf examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
sanderhelleso / klourly / client / src / components / room / admin / reports / downloads / DownloadCheckinPDF.js View on Github 
generatePDF = () => {
const now = new Date().getTime();
const report_generated_at = `${format.getFormatedDateAndTime(now)}`;
const startTime = `${format.getFormatedDateAndTime(this.props.activeReport.timestamp)}`;
const endTime = `${format.getFormatedDateAndTime(this.props.activeReport.endTime)}`;
console.log(startTime, 123);
// create a new pdf
const doc = new jsPDF();
// doc title
doc.setFontSize(28)
doc.text(20, 25, `Checkin Report`);
// sub title (Room Name)
doc.setFontSize(14);
doc.text(20, 35, `Room Name: ${this.props.activeRoom.name}`);
// meta data (checkin ID / start / end)
doc.setTextColor(150);
doc.setFontSize(10);
doc.text(140, 22, 'ID:');
doc.text(155, 22, this.props.activeReport.checkinID);
doc.text(140, 28, 'From:');
doc.text(155, 28, startTime);import jsPDF from 'jspdf'
import 'jspdf-autotable'
/* eslint-disable func-names */
// https://stackoverflow.com/questions/28327510/align-text-right-using-jspdf/28433113
const splitRegex = /\r\n|\r|\n/g
jsPDF.API.textEx = function(text, x, y, hAlign, vAlign) {
let currX = x
let currY = y
const fontSize = this.internal.getFontSize() / this.internal.scaleFactor
// As defined in jsPDF source code
const lineHeightProportion = 1.15
let splittedText = null
let lineCount = 1
if (
vAlign === 'middle' ||
vAlign === 'bottom' ||
hAlign === 'center' ||
hAlign === 'right'
) {
splittedText = typeof text === 'string' ? text.split(splitRegex) : text// Assign false to enable `doc.lastAutoTable.finalY || 40` sugar;
jsPDF.API.lastAutoTable = false;
jsPDF.API.previousAutoTable = false; // deprecated in v3
jsPDF.API.autoTable.previous = false; // deprecated in v3
jsPDF.API.autoTableSetDefaults = function(defaults) {
setDefaults(defaults, this);
return this;
};
jsPDF.autoTableSetDefaults = function(defaults, doc) {
setDefaults(defaults, doc);
return this;
};
jsPDF.API.autoTableHtmlToJson = function(tableElem, includeHiddenElements) {
includeHiddenElements = includeHiddenElements || false;
if (!tableElem || !(tableElem instanceof HTMLTableElement)) {
console.error("A HTMLTableElement has to be sent to autoTableHtmlToJson");
return null;
}
let {head, body, foot} = parseHtml(tableElem, includeHiddenElements, false);
let firstRow = head[0] || body[0] || foot[0];
return {columns: firstRow, rows: body, data: body};
};
/**
* @deprecated
*/this.previousAutoTable = table;
this.lastAutoTable = table;
this.autoTable.previous = table; // Deprecated
applyUserStyles();
resetState();
return this;
}
jsPDF.API.autoTable = autoTable;
// Assign false to enable `doc.lastAutoTable.finalY || 40` sugar;
jsPDF.API.lastAutoTable = false;
jsPDF.API.previousAutoTable = false; // deprecated in v3
jsPDF.API.autoTable.previous = false; // deprecated in v3
jsPDF.API.autoTableSetDefaults = function(defaults) {
setDefaults(defaults, this);
return this;
};
jsPDF.autoTableSetDefaults = function(defaults, doc) {
setDefaults(defaults, doc);
return this;
};
jsPDF.API.autoTableHtmlToJson = function(tableElem, includeHiddenElements) {
includeHiddenElements = includeHiddenElements || false;
if (!tableElem || !(tableElem instanceof HTMLTableElement)) {
console.error("A HTMLTableElement has to be sent to autoTableHtmlToJson");
return null;
}makePDF(layout) {
// check for and install the geopdf plugin
if(!jsPDF.API.setGeoArea) {
GeoPdfPlugin(jsPDF.API);
}
// new PDF document
const doc = new jsPDF(layout.orientation, layout.units, layout.page);
loadFonts(this.props.fontIndexUrl)
.then(fontIndex => {
for (const fontName in fontIndex.FONTS) {
// add the file to the VFS
doc.addFileToVFS(fontName, fontIndex.FONTS[fontName]);
// add the font.
const parts = fontName.replace('.ttf', '').split('-');
doc.addFont(fontName, parts[0], parts[1].toLowerCase());
}
this.paintPDF(doc, layout);
});resetState();
return this;
}
jsPDF.API.autoTable = autoTable;
// Assign false to enable `doc.lastAutoTable.finalY || 40` sugar;
jsPDF.API.lastAutoTable = false;
jsPDF.API.previousAutoTable = false; // deprecated in v3
jsPDF.API.autoTable.previous = false; // deprecated in v3
jsPDF.API.autoTableSetDefaults = function(defaults) {
setDefaults(defaults, this);
return this;
};
jsPDF.autoTableSetDefaults = function(defaults, doc) {
setDefaults(defaults, doc);
return this;
};
jsPDF.API.autoTableHtmlToJson = function(tableElem, includeHiddenElements) {
includeHiddenElements = includeHiddenElements || false;
if (!tableElem || !(tableElem instanceof HTMLTableElement)) {
console.error("A HTMLTableElement has to be sent to autoTableHtmlToJson");
return null;
}
let {head, body, foot} = parseHtml(tableElem, includeHiddenElements, false);
let firstRow = head[0] || body[0] || foot[0];
return {columns: firstRow, rows: body, data: body};resetState();
return this;
}
jsPDF.API.autoTable = autoTable;
// Assign false to enable `doc.lastAutoTable.finalY || 40` sugar;
jsPDF.API.lastAutoTable = false;
jsPDF.API.previousAutoTable = false; // deprecated in v3
jsPDF.API.autoTable.previous = false; // deprecated in v3
jsPDF.API.autoTableSetDefaults = function(defaults) {
setDefaults(defaults, this);
return this;
};
jsPDF.autoTableSetDefaults = function(defaults, doc) {
setDefaults(defaults, doc);
return this;
};
jsPDF.API.autoTableHtmlToJson = function(tableElem, includeHiddenElements) {
includeHiddenElements = includeHiddenElements || false;
if (!tableElem || !(tableElem instanceof HTMLTableElement)) {
console.error("A HTMLTableElement has to be sent to autoTableHtmlToJson");
return null;
}
let {head, body, foot} = parseHtml(tableElem, includeHiddenElements, false);
let firstRow = head[0] || body[0] || foot[0];
return {columns: firstRow, rows: body, data: body};createPdf = ({gaugeDataURL, gaugeWidth, gaugeHeight}) => {
const {diagnosticData, onDownloadAsPdf, userYou} = this.props
const {components, percent, shortTitle, title} = computeBobScore(diagnosticData)
const doc = new jsPDF({format: 'a4', orientation: 'landscape', unit: 'cm'})
const centerWidth = 14.85 // 29.7 cm / 2
// Header.
if (gaugeDataURL && gaugeWidth) {
doc.addImage(gaugeDataURL, 'JPEG', centerWidth - 1.5, 2.4, 3, 3 * gaugeHeight / gaugeWidth)
}
doc.setFontSize(14)
doc.text(`Diagnostic de ${config.productName}`, centerWidth, 2, 'center')
doc.setTextColor(colors.DARK_TWO)
doc.setFontSize(20)
doc.setFontType('bold')
doc.text(`${percent}%`, centerWidth, 4.2, 'center')
doc.setFontSize(22)
if (shortTitle || title) {
doc.text(clearEmoji(clearMarkup(shortTitle || title)), centerWidth, 5.5, 'center')export const generatePdfDocument = async (title, containerElement, reportFileName) => {
const pageWidth = 210; // mm
const pageHeight = 295; // mm
const margin = 10; // mm
const spacing = 5; // mm
const contentWidth = pageWidth - margin * 2;
const elements = containerElement.querySelectorAll('[data-printable]');
let pdf = new jsPDF('p', 'mm', 'a4');
let currentPositionY = margin;
pdf.setFontSize(10);
pdf.text(title, 105, currentPositionY + 2, "center");
currentPositionY += 10;
for (const element of elements) {
const imageData = await domtoimage.toPng(element)
const canvasHeightInMm = element.scrollHeight * contentWidth / element.scrollWidth;
if (currentPositionY + canvasHeightInMm > (pageHeight - margin)) {
pdf.addPage();
currentPositionY = margin;
}drawTable(table);
table.finalY = table.cursor.y;
this.previousAutoTable = table;
this.lastAutoTable = table;
this.autoTable.previous = table; // Deprecated
applyUserStyles();
resetState();
return this;
}
jsPDF.API.autoTable = autoTable;
// Assign false to enable `doc.lastAutoTable.finalY || 40` sugar;
jsPDF.API.lastAutoTable = false;
jsPDF.API.previousAutoTable = false; // deprecated in v3
jsPDF.API.autoTable.previous = false; // deprecated in v3
jsPDF.API.autoTableSetDefaults = function(defaults) {
setDefaults(defaults, this);
return this;
};
jsPDF.autoTableSetDefaults = function(defaults, doc) {
setDefaults(defaults, doc);
return this;
};
jsPDF.API.autoTableHtmlToJson = function(tableElem, includeHiddenElements) {
includeHiddenElements = includeHiddenElements || false;
if (!tableElem || !(tableElem instanceof HTMLTableElement)) {
