경비 보고서
이 샘플은 경비 보고서를 만든 다음, PdfDocument API를 사용하여 PDF 파일로 저장하는 방법을 보여 줍니다.
샘플은 drawText 및 벡터 그래픽 메서드를 사용하여 캡션, 필요한 필기 입력, 표 셀을 그립니다.
scale 메서드를 사용하여 페이지 너비에 맞게 표의 크기를 조정합니다.
app.js
index.html
data.js
styles.css
import 'bootstrap.css';
import './styles.css';
import * as wijmo from '@mescius/wijmo';
import * as pdf from '@mescius/wijmo.pdf';
import { getEmployees } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
document.querySelector('#btnExport').addEventListener('click', () => {
let doc = new pdf.PdfDocument({
header: {
declarative: {
text: 'Expense Report\t&[Page]\\&[Pages]',
font: new pdf.PdfFont('times', 12),
brush: '#bfc1c2'
}
},
lineGap: 2,
pageSettings: {
margins: {
left: 36,
right: 36,
top: 36,
bottom: 36
}
},
ended: (sender, args) => pdf.saveBlob(args.blob, 'Document.pdf')
});
//
getEmployees().forEach((employee, i, arr) => {
drawEmployee(doc, employee);
//
if (i < arr.length - 1) {
doc.addPage();
}
});
//
doc.end();
});
}
//
const colWidth = 80, rowHeight = 18;
//
function drawEmployee(doc, employee) {
let tot = employee.expenses.totals;
let expenses = employee.expenses.items.sort((a, b) => a.date.getTime() - b.date.getTime());
//
let minDate = expenses[0].date, maxDate = expenses[expenses.length - 1].date, columns = [
{ header: 'Date', binding: 'date', format: 'd' },
{ header: 'Description', binding: 'description', format: 'c' },
{ header: 'Hotel', binding: 'hotel', format: 'c' },
{ header: 'Transport', binding: 'transport', format: 'c' },
{ header: 'Meal', binding: 'meal', format: 'c' },
{ header: 'Fuel', binding: 'fuel', format: 'c' },
{ header: 'Misc', binding: 'misc', format: 'c' },
{ header: 'Total', binding: 'total', format: 'c' }
], bold = new pdf.PdfFont('times', 10, 'normal', 'bold');
//
// * draw captions *
doc.drawText('Purpose: ', null, null, { font: bold, continued: true });
doc.drawText(employee.purpose);
//
doc.drawText('From: ', 380, 0, { font: bold, continued: true });
doc.drawText(wijmo.changeType(minDate, wijmo.DataType.String, 'd'));
//
doc.drawText('To: ', 470, 0, { font: bold, continued: true });
doc.drawText(wijmo.changeType(maxDate, wijmo.DataType.String, 'd'));
//
doc.moveDown(2);
//
let y = doc.y;
doc.drawText('Name: ', 20, y, { font: bold, continued: true });
doc.drawText(employee.name);
//
//
doc.drawText('Position: ', 190, y, { font: bold, continued: true });
doc.drawText(employee.position);
//
doc.drawText('SSN: ', 360, y, { font: bold, continued: true });
doc.drawText(employee.ssn);
//
y = doc.y;
doc.drawText('Department: ', 20, y, { font: bold, continued: true });
doc.drawText(employee.department);
//
doc.drawText('Manager: ', 190, y, { font: bold, continued: true });
doc.drawText(employee.manager);
//
doc.drawText('Employee ID: ', 360, y, { font: bold, continued: true });
doc.drawText(employee.id);
//
doc.moveDown(2);
//
// * draw table *
doc.saveState();
//
y = 0;
let scale = doc.width / (columns.length * colWidth), docY = doc.y;
//
if (scale > 1) {
scale = 1;
}
//
doc.scale(scale, scale, new wijmo.Point(0, docY));
doc.translate(0, docY);
//
// header
renderRow(doc, y, columns, (column) => column.header, null, bold, '#fad9cd');
//
y += rowHeight;
//
// body
expenses.forEach(item => {
renderRow(doc, y, columns, (column) => item[column.binding], (column) => column.format);
y += rowHeight;
});
//
// footer
let totRow = ['Total', '', tot.hotel, tot.transport, tot.meal, tot.fuel, tot.misc, tot.total];
renderRow(doc, y, totRow, null, () => 'c', bold, '#fad9cd');
//
y += rowHeight;
//
doc.y = docY + y * scale;
//
doc.restoreState();
//
doc.moveDown(2);
//
// * draw captions *
doc.drawText('Subtotal: ', 400, doc.y, { font: bold, continued: true });
doc.drawText(wijmo.changeType(tot.total - employee.advance, wijmo.DataType.String, 'c'));
//
doc.drawText('Cash Advance: ', 400, doc.y, { font: bold, continued: true });
doc.drawText(wijmo.changeType(employee.advance, wijmo.DataType.String, 'c'));
//
doc.drawText('Total: ', 400, doc.y, { font: bold, continued: true });
doc.drawText(wijmo.changeType(tot.total, wijmo.DataType.String, 'c'));
doc.moveDown(2);
//
checkLineAvailable(doc);
//
let thinPen = new pdf.PdfPen('#000000', 0.5);
//
y = doc.y;
let sz = doc.drawText('Employee signature:', 0, y);
doc.paths.moveTo(sz.size.width, doc.y).lineTo(sz.size.width + 150, doc.y).stroke(thinPen);
sz = doc.drawText('Date:', 300, y);
doc.paths.moveTo(300 + sz.size.width, doc.y).lineTo(300 + sz.size.width + 75, doc.y).stroke(thinPen);
//
doc.moveDown();
//
checkLineAvailable(doc);
//
y = doc.y;
sz = doc.drawText('Approved by:', 0, y);
doc.paths.moveTo(sz.size.width, doc.y).lineTo(sz.size.width + 150, doc.y).stroke(thinPen);
sz = doc.drawText('Date:', 300, y);
doc.paths.moveTo(300 + sz.size.width, doc.y).lineTo(300 + sz.size.width + 75, doc.y).stroke(thinPen);
}
//
function checkLineAvailable(doc) {
if (doc.height - doc.y < doc.lineHeight() + doc.lineGap) {
doc.addPage();
}
}
//
function renderRow(doc, y, values, valueGetter, formatGetter, font, brush) {
values.forEach((v, idx) => {
let x = idx * colWidth;
//
doc.paths
.rect(x, y, colWidth, rowHeight)
.fill(brush || '#f4b19b');
//
let value = valueGetter != null ? valueGetter(v) : v || '';
let format = formatGetter != null ? formatGetter(v) : '';
//
if (value !== 'Total') {
value = wijmo.changeType(value, wijmo.DataType.String, format);
}
//
doc.drawText(value, x + 3, y + 5, {
font: font,
height: rowHeight,
width: colWidth
});
});
}