Using jspdf to export to pdf
This commit is contained in:
parent
c70d074c32
commit
2fb6e6ea4f
@ -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",
|
||||||
|
@ -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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user