Using jspdf to export to pdf

This commit is contained in:
Amritanshu Agrawal 2021-01-21 09:46:26 +05:30
parent c70d074c32
commit 2fb6e6ea4f
3 changed files with 55 additions and 59 deletions

View File

@ -26,6 +26,8 @@
"@angular/platform-browser": "^11.0.8",
"@angular/platform-browser-dynamic": "^11.0.8",
"@angular/router": "^11.0.8",
"jspdf": "^2.3.0",
"jspdf-autotable": "^3.5.13",
"moment": "^2.29.1",
"rxjs": "^6.6.3",
"tslib": "^2.1.0",

View File

@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { ActivatedRoute, Router } from '@angular/router';
import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';
import * as moment from 'moment';
import { Observable, of } from 'rxjs';
@ -110,42 +112,40 @@ export class CauseListComponent implements OnInit {
}
exportCsv() {
const csvData = new Blob([this.toCsv(this.dataSource.dataValues)], {
type: 'text/csv;charset=utf-8;',
const doc = new jsPDF({
orientation: 'landscape',
});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', 'cause-list.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
toCsv(data: Case[]): string {
const header = [
'File No.',
'Title',
'Court Case Number',
'Forum',
'Court / Item Number',
'Bench',
'Proceedings',
'Next Hearing',
'On Behalf of',
'Other Hearings',
'Remarks',
];
const csv = data.map(
(row) =>
`${row.caseSource.prefix}-${row.officeFileNumber}\t${row.title}\t${row.courtCaseNumber}\t${
row.court?.name
}\t${this.courtNumber(row)} / ${this.itemNumber(row)}\t${this.bench(
row,
)}\t${this.proceedings(row)}\t${this.nextHearingDate(row)}\t${
row.appearOnBehalfOf
}\t${this.otherHearingDates(row)}\t${row.remarks}`,
);
csv.unshift(header.join('\t'));
return csv.join('\r\n');
// doc.autoTable({ html: '#table' });
autoTable(doc, {
head: [
[
'File No.',
'Title',
'Court Case Number',
'Forum',
'Court / Item Number',
'Bench',
'Proceedings',
'Next Hearing',
'On Behalf of',
'Other Hearings',
'Remarks',
],
],
body: this.dataSource.dataValues.map((row) => [
`${row.caseSource.prefix}-${row.officeFileNumber}`,
row.title,
row.courtCaseNumber,
row.court?.name || '',
`${this.courtNumber(row)} / ${this.itemNumber(row)}`,
this.bench(row),
this.proceedings(row),
this.nextHearingDate(row),
row.appearOnBehalfOf,
this.otherHearingDates(row),
row.remarks,
]),
});
doc.save('cause-list.pdf');
}
}

View File

@ -1,10 +1,8 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
import { Case } from '../core/case';
import { ActivatedRoute } from '@angular/router';
import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';
import { ComplianceList } from './compliance-list';
import { ComplianceListDatasource } from './compliance-list-datasource';
@ -39,24 +37,20 @@ export class ComplianceListComponent implements OnInit {
}
exportCsv() {
const csvData = new Blob([this.toCsv(this.info)], {
type: 'text/csv;charset=utf-8;',
const doc = new jsPDF({
orientation: 'landscape',
});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', 'cause-list.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
toCsv(data: ComplianceList[]): string {
const header = ['File No.', 'Title', 'Proceedings', 'Next Hearing', 'Compliance Date'];
const csv = data.map(
(row) =>
`${row.officeFileNumber}\t${row.title}\t${row.proceedings}\t${row.nextHearingDate}\t${row.complianceDate}`,
);
csv.unshift(header.join('\t'));
return csv.join('\r\n');
// doc.autoTable({ html: '#table' });
autoTable(doc, {
head: [['File No.', 'Title', 'Proceedings', 'Next Hearing', 'Compliance Date']],
body: this.info.map((row) => [
row.officeFileNumber,
row.title,
row.proceedings,
row.nextHearingDate,
row.complianceDate,
]),
});
doc.save('compliance-list.pdf');
}
}