Jump to content

Recommended Posts

I'm looking for pointers here, not necessarily detailed code examples. I want to solve this one myself as much as possible.

 

I have an "online statement" site that displays account activity for customers. I have an associated "print.css" file so it can be printed out in a nice, readable format.

 

Some of our customers have multiple accounts (one guy has around 80).

 

For customers with multiple accounts, I have a summary display that adds up all their account activity. Good as far as it goes.

 

But some of our customers want to be able to print out and file the statement for each individual account (at a minimum, they need to do this at tax time).

 

The guy with 80 accounts, understandably, doesn't want to have to manually display and print 80 pages.

 

Is there a way that I could put a "print all" button on the page, that when pressed lets the user print out statements for all of their accounts, using the format established by print.css? Ideally without having to display each page, or hit "print" in a dialog box 80 times?

 

I was contemplating trying to write a loop that, for each of the 80 queries, would write the results into a non-viewed HTML shell, then add each page to a PDF using print.css, then give the user the print dialog box in order to print the PDF (or allow them to save the PDF to their desktop). But I'd appreciate ideas.

 

Thanks!

Yes, this is very possible and not that difficult. It just requires the use of some specialized CSS.

 

The CSS framework includes the ability to define different styles based upon the output media. For example, you can have a page display differently on a mobile phone than it does in a browser. One of the supported media formats is the "print" media. Basically, the styles defined in the print media format are rendered when you print the page.

 

For example, when I render some results on a page it will typically have the website header image across the top along with navigational elements on the left and maybe some footer links as well. In those situations I will define the styles for those sections in the "print" media format to not display. So, when the user prints the output they get only the output and not all the other elements of the website. It makes the output much cleaner.

 

Additionally, and more importantly, the CSS framework supports page breaks.

 

I will assume that the printed output for each account will need a header and some other generic data that you do not want displayed when the records are displayed sequentially on a web page. To solve your problem I would create a page that allows the user to pull the results for all of their accounts. Then when building the page include ALL the data you need displayed in the web page and the print output. Then use the media property to hide the multiple headers when displayed in a browser and to display when printed. And, insert page breaks between each account set of records.

Here is a quick and dirty example. Take a look what the page looks like in a browser and then look at the print preview (or actually print it if you wish). The PHP created random data for 10 accounts and created the page using classes and styles so you get one HTML page with all the records, but get separate pages for each account when printing.

 

<?php
$totalAccts = 10;
$date = date('m-d-Y');

$content = "<div id=\"allAcctHeader\"><h2>Details for all accounts on {$date}</h2><br /><br /></div>\n";
for ($acct=1; $acct<=$totalAccts; $acct++)
{
$recordsForAcct = rand(1, 6);
$acctTotal = 0;

$content .= "<table border=\"1\">\n";
    $content .= "<tr><th colspan=\"2\">Output for account #{$acct}<span class=\"printView\">, Printed on: {$date}</span></th></tr>\n";
for ($rec=1; $rec<=$recordsForAcct; $rec++)
{
	$amt = rand(1, 200);
	$content .= "<tr><td>Record {$rec}</td><td>{$amt}</td></tr>\n";
	$acctTotal += $amt;
}
    $content .= "<tr><th>Total</th><th>{$acctTotal}</th></tr>\n";
$content .= "</table>\n";

if ($acct<$totalAccts)
{
    $content .= "<div class=\"pageBreak\"><br /></div>\n";
}
}

?> 
<html>
<head>
<style>
/* default styles */
#header { width:100%;border:1px solid #000000; }
#menu { width:150px;border:1px solid #000000;line-height:30px;float:left; }
#content { border:1px solid #000000;margin-left:150px; }
.printHead { display: none; }
.printView { display: none; }
/* print specific styles */
@media print {
  #header { display: none; }
  #menu { display: none; }
  #content { margin-left:0px; border:0px; }
  #allAcctHeader { display: none; }
  .printHead { display: inline; }
  .printView { display: inline; }
  .pageBreak { page-break-after: always; }
}
</style>
</head>
<body>
<div id="header">
<h1>Site Header</h1>
</div>
<div id="menu">
<br />
Menu Item 1<br />
Menu Item 2<br />
Menu Item 3<br />
Menu Item 4<br />
<br /><br /><br /><br />
</div>
<div id="content">
<?php echo $content; ?>
</div>
</body>
</html>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.