Printing Government paper form from website - html

We have to recreate a Government form from our website. The form is full of vertical and horizontal lines and different width and height cells. Some cells contain pre-printed text and have two or three lines of data.
We have created the Web page to capture and validate the dynamic data and now need a method of rendering the form (A4) to the printer. The client does not want a classic PDF print preview so our normal reporting tool will not work. Can anyone guide me on how to create a print output using css, html with vertical and horizontal lines and positioned data.

Sorry if I affended this board, I was actually trying to get some guidance from the experts
Our current code is below. We use Jaspersoft Ireports to design the form layout and the PHPJasperXML library to render a PDF and write a copy on the server.
I have to rewrite this using CSS & HTML and render in an Iframe with an immediate (kiosk) print. I'm just looking for the right approach before I go down the wrong route.
include "config.php";
$version="0.9d";$pgport=5432;
$pchartfolder="./class/pchart2";
$ecsd_id = $_REQUEST['ecsd_id'];
include_once('class/tcpdf/tcpdf.php');
include_once("class/PHPJasperXML.inc.php");
ob_clean();
$PHPJasperXML = new PHPJasperXML();
//$PHPJasperXML->debugsql=true;
$PHPJasperXML->arrayParameter=array('ecsd_id'=>$ecsd_id);
$PHPJasperXML->load_xml_file("ecsd_pdp.jrxml");
//$PHPJasperXML->transferDBtoArray($server,$user,$pass,$db);
$PHPJasperXML->transferDBtoArray($dbhost,$dbuser,$dbpass,$dbname);
//$PHPJasperXML->load_xml_file("ecsd_pdp_copy.jrxml");
$PHPJasperXML->outpage("I");
$PHPJasperXML->outpage("F", "ecsd_prints/" . $ecsd_id . ".pdf");
//page output method I:standard output F =save as filename and submit and parameter as destinate file name D:Download file

Related

How to Print each row in the list table in a separate page. NetSuite Advanced PDF

I am trying to print each row in the picking ticket on a separate page and for now, am using the Row height to move each item to a new page but this is something not professional cuz when I made any change in the template the format is totally changed and this solution will not work so, I am looking for a style to make this solution more dynamic whatever the changes that may happen to the other tables in the PDF.
You can use the css property page-break-after: always for this purpose.
e.g.
<style>
div.ps { page-break-after:always}
</style>
...
<div class="ps">
... ps details
</div>

How to change the location of the TOC in a MediaWiki skin

I'm woking on a MediaWiki skin for my site. For the page content I'm using <?= $this->html( 'bodycontent' ); ?> to output it all. Part of this, on longer pages, is the Table of Contents (TOC).
I would like to move the location of the TOC out of the body an into the sidebar but I'm not sure how to prevent the TOC from showing in the bodycontent or where to get the raw data to display it in the sidebar.
I'm hoping there is a data time similar to $this->data['sidebar']['navigation'] that I can use to format it how I want.
How can I turn off the TOC in the bodycontent?
Is there a $this->data location that has the TOC data?
The MediaWiki skinning system is not really designed for this, but someone created an extension to make your work easier: https://www.mediawiki.org/wiki/Extension:DeToc
Using that extension you would do something like this (inside function execute()):
$body = $this->data['bodycontent'];
$new_body = DeToc::RemoveToc($body, $extracted_toc);
/* Print body */
echo $new_body;
/* Print TOC somewhere else */
echo $extracted_toc;
Alternatively you could just turn off the TOC, using $parser->mShowToc = false;, and then create the TOC yourself. MediaWiki internally uses a regex like this to find all sections: '/^\={2,5}(.*?)\={2,5}$/m'

Edit complete HTML of page in Drupal

We have our site running on Drupal. Now I have 2 landingpages: pages without menu's and a bit different in layout as the others. I want to edit the complete HTML of the pages in the Drupal-interface, so marketeers can easily add HTML-snippets (for testing etc), without using a developer.
How could I create an empty header and footer, and let the complete HTML be the content?
You could create a specific node type, and then use this function in your template.php :
<?php
function theme_preprocess_page(&$variables)
{
if (isset($variables['node']->type))
{
$nodetype = $variables['node']->type;
$variables['theme_hook_suggestions'][] = 'page__' . $nodetype;
}
}
It will allows you to create templates for pages (Drupal is only offering this possibility for the page content) based on node types using page--node-type.tpl.php, so that you'll be able to customize the entire page html instead of just the content.

Page breaks in JEditorPane

For the love of everything holy, can someone please help me do this?
I have literally been searching for two hours on how to put a page break in a JEditorPane for when it prints to no avail. I've tried everything from HTML styles to even trying sketchy APIs I've found on random websites.
The code I wrote uses a textPaneEditor to print the data, and I use the HTML styling to format it in the way that I need it to look. So, I need a way to add a page break after I push in all of the data for the next line possibly with the HTML styling. Unfortunately, " " doesn't seem to work.
Here's what my code essentially looks like:
String report = "<font size=\"3\">";
report += "<b> TEST! </b><br>";
report += "PAGE BREAK WOULD GO HERE<br>";
report += "</font>";
JEditorPane textArea = new JEditorPane("text/html", report);
try{
textArea.print(new MessageFormat(""), new MessageFormat(""), true, null, null, true);
}catch(PrinterException e){
e.printStackTrace();
}
TLDR; how do I page break a JTextEditorPane with HTML styling during printing to a printer?
I'm working on solving the same problem myself right now. One thought I've had is to issue two print commands, one for each page to print. Not sure if this is or will be the most elegant or efficient solution but it's something to look into.

storing additional data on a html page

I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );