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": "^11.0.8",
"@angular/platform-browser-dynamic": "^11.0.8", "@angular/platform-browser-dynamic": "^11.0.8",
"@angular/router": "^11.0.8", "@angular/router": "^11.0.8",
"jspdf": "^2.3.0",
"jspdf-autotable": "^3.5.13",
"moment": "^2.29.1", "moment": "^2.29.1",
"rxjs": "^6.6.3", "rxjs": "^6.6.3",
"tslib": "^2.1.0", "tslib": "^2.1.0",

View File

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

View File

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