Account statement example
An example for generating accounts statement with tables and a more fancy layout
Repository files
PDF files
| Converter | Status | PDF Preview |
|---|---|---|
| PDFreactor |
|
|
| PrinceXML |
|
|
| Antennahouse |
|
|
| Weasyprint |
|
|
| PagedJS |
|
conversion error, no PDF generated
|
| Typeset.sh |
|
|
| Vivliostyle |
|
|
| BFO |
|
render process throws error
|
OK
.svg){kind=icon}
OK with issues
Error
Unsupported
HTML input
<!DOCTYPE html>
<html>
<head>
<title>Reporting demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/statement.css" />
<link rel="stylesheet" href="css/addendum.css" />
<style type="text/css">
@page statement {
@bottom-right {
content: "Page " counter(page) " of " target-counter(url("#end"), page);
}
}
</style>
</head>
<body lang="en">
<article>
<section class="statement">
<div>
<div class="footer">
<div>ZOPYX Global Enterprise<br/>Phone: (+49) 7071 793376, Fax: (+49) 7071 793376, Website: www.zopyx.com<br />Email: info@zopyx.com</div>
</div>
<div class="head1-left">
<!--
<img src="logo.png" />
-->
<img src="assets/LogoSizingSample.png" />
</div>
<div class="head1-right">
<div class="head-title">Statement of Account</div>
<div class="head-date">January 01, 2019 to March 31, 2019</div>
</div>
<div class="head2-left">
<div class="sequence-number">000024</div>
<div>HHKO MFIU</div>
<div>2888 XMYVFEJ FI</div>
<div>AXYDTPL QP G4I 2U8</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="head2-right">
<div class="advisor-title" xpath=".//YFAS_TITLE">Your Financial Advisor</div>
<div class="advisor-outer">
<div class="advisor">
<div>JOHN SMITH</div>
<div>BIG BUSINESS INC</div>
<div>123 ARLINGTON ST</div>
<div>NANAIMO BC B1A 2CB</div>
<div></div>
<div></div>
<div>Telephone Number</div>
<div>(299) 555-1234</div>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="two-tables">
<table class="accounting table-left">
<caption>
<span>Investor Information</span>
</caption>
<thead>
<tr class="headers">
<th class="text-left">Account Type</th>
<th class="text-left">Account Number</th>
</tr>
</thead>
<tbody>
<tr class="headers border-bottom" >
<td class="text-left text-10 bold">Self-Directed Tax Free Savings Acct</td>
<td class="text-left text-10 bold">19570</td>
</tr>
</tbody>
<tfoot>
<tr class="border-bottom">
<td colspan="2">
<div class="text-left bold">Administrator Account Number</div>
<div class="text-left">N1F4011Q</div>
These investments are registered in the name of FIDELITY CLEARING CANADA ULC on your behalf.
</td>
</tr>
</tfoot>
</table>
<table class="accounting table-right">
<caption>
<span>Account Value</span>
</caption>
<tbody>
<tr class="border-bottom">
<td class="text-left text-10">
Closing Market Value This<br />Period
</td>
<td class="text-right text-10">
$7,047.73
</td>
</tr>
<tr class="border-bottom">
<td class="text-left">
Opening Balance
</td>
<td class="text-right">
$6,070.12
</td>
</tr>
<tr class="border-bottom">
<td class="text-left">
Book Cost
</td>
<td class="text-right">
$6,390.75
</td>
</tr>
</tbody>
</table>
<div style="clear: both"></div>
</div>
<table class="accounting account-summary">
<caption>
<span>Account Summary</span>
</caption>
<thead>
<tr class="headers border-bottom">
<th class="text-left">Fund Name</th>
<th class="text-center">DSC</th>
<th class="text-right">Book<br />Cost ($)</th>
<th class="text-right">Average<br />Cost ($)</th>
<th class="text-right">Unit<br />Balance</th>
<th class="text-right">Unit<br />Price ($)</th>
<th class="text-right">Market<br />Value ($)</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td colspan="7" class="text-7 text-left">Canadian $ Investments</td>
</tr>
<tr class="border-bottom">
<td class="text-left">ACEME Small Cap Fund Series F ACM401</td>
<td class="text-center">N</td>
<td class="text-right">6,390.75</td>
<td class="text-right">15.9821</td>
<td class="text-right">399.869</td>
<td class="text-right">17.6251</td>
<td class="text-right">7,047.73</td>
</tr>
<tr class="border-bottom">
<td class="text-left" colspan="2"></td>
<td class="text-right" colspan="1"></td>
<td class="text-right" colspan="4"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-7" colspan="7">"<b>Book cost</b>" means the total amount paid to purchase an investment, including any transaction charges related to the purchase, adjusted for reinvested distributions, return of capital and corporate reorganizations.<br />The book (original) cost shown in this statement may not be suitable for income tax purposes, as it may not reflect all required adjustments. It is important for you to keep records of all of your investment transactions and consult your income tax advisor to properly determine your gains and losses for income tax purposes.<br /><br />"<b>Market value</b>" is the price at which an investment can be sold on the open market at a specific point in time. The market value of an investment fund is its<br />"<b>Net Asset Value</b>". This is usually calculated by investment managers once per day/week/month.</td>
</tr>
</tfoot>
</table>
<table class="accounting transaction-summary">
<caption>
<span>Transaction Summary</span>
</caption>
<thead>
<tr class="headers">
<th class="text-left">Fund Name</th>
<th class="text-right">Purchases &<br />Transfers-In ($)</th>
<th class="text-right">Redemptions &<br />Transfers-Out ($)</th>
<th class="text-right">Income<br />Distribution ($)</th>
<th class="text-right">Capital Gain<br />Distribution ($)</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td class="text-7 text-left">ACEME Small Cap Fund Series F ACM401</td>
<td class="text-7 text-right">0.00</td>
<td class="text-7 text-right">0.00</td>
<td class="text-7 text-right">0.00</td>
<td class="text-7 text-right">217.65</td>
</tr>
</tbody>
<tfoot>
<tr class="border-bottom">
<td class="text-7" colspan="5">Any switch activity within your account is reported in the transaction details section of your statement.</td>
</tr>
</tfoot>
</table>
<table class="accounting transaction-details layout-fixed">
<caption>
<span>Transaction Details</span>
</caption>
<thead>
<tr class="headers">
<th class="text-left">Trade Date</th>
<th class="text-left" style="width: 25%">Transaction Type</th>
<th class="text-right">Gross<br />Amount ($)</th>
<th class="text-right">Deductions<br />Amount ($)</th>
<th class="text-right">Net<br />Amount ($)</th>
<th class="text-right">Unit<br />Price ($)</th>
<th class="text-right">Transaction<br />Units</th>
<th class="text-right">Unit<br />Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8" class="text-10 bold extra-top-padding extra-bottom-padding">ACME Small Cap Fund Series F ACM401</td>
</tr>
<tr class="border-bottom">
<td colspan="7" class="text-left" >
<span class="footnote-marker"> </span>
Opening Balance
</td>
<td class="text-right">387.491</td>
</tr>
<tr class="border-bottom">
<td class="text-left" >
<span class="footnote-marker"> </span>
02/27/2019
</td>
<td class="text-left">Capital Gain Distribution</td>
<td class="text-right">217.65</td>
<td class="text-right">0.00</td>
<td class="text-right">217.65</td>
<td class="text-right">17.5834</td>
<td class="text-right">12.378</td>
<td class="text-right">399.869</td>
</tr>
<tr class="border-top border-bottom">
<td colspan="7" class="text-left" >
<span class="footnote-marker"> </span>
Closing Balance
</td>
<td class="text-right">399.869</td>
</tr>
</tbody>
<tfoot>
<tr class="">
<td class="text-7" colspan="8"></td>
</tr>
</tfoot>
</table>
<div>Please review your statement of account carefully. If there is any information that does not match your records, contact your Financial Advisor or our Client Services department within 60 days.</div>
<div></div>
<div></div>
</div>
<div id="end"></div>
</section>
<!-- MAT.PDF as two images
<div class="addendum-images">
<img src="MAT_INSERT_20190331_V1-0.png"/>
<img src="MAT_INSERT_20190331_V1-1.png"/>
</div>
-->
</article>
</body>
</html>