Copyright (c) 2018, HexaTech, USA.
Tech support: support@hexatech.com
Overview
rReport is a javascript-based report generator and print preview component
as a flexible RAD (Rapid Application Development) tool for report with PDF output.
It can radically speed up your sophisticated report development.
Instead of programming against screen with pixels, you can directly program against
paper with physical inch (or mm) length units as the x-y coordinates.
rReport lets you freely place predefined objects or drawing your own objects.
After creating your report, you can go back to change the report by adding, removing,
modifying or drawing new objects.
rReport also provides a browser-based report designer to let you visually create your report
templates and fill them out at runtime.
Application Areas
rReport can be used as a powerful report, drawing, and designer engine for a wide variety of reporting applications.
The following is just a partial list.
Using rReport is simple. Just modify Template Sample 1
below with three quick steps:
Step 1. Include rreport js file with correct path.
Step 2. Define an empty div tag with id=report_viewer_holder to hold the report viewer
Step 3. Write code to generate your report.
<!DOCTYPE html>
<html>
<head>
<title>rReport Sample 1</title>
<!--***** Step 1: include rreport js file *****-->
<script type="text/javascript" src="lib/rreport.min.js"></script>
</head>
<body>
<!--***** Step 2: define div tag to holder report viewer *****-->
<div id="report_viewer_holder" style="margin-top:3em;"></div>
<script type="text/javascript">
<!--***** Step 3: write code to generate report (may use separate js file if extensive coding needed)*****-->
///////////////////////////////////////////////////////
function generate_report() {
//---create viewer
var options = { container: "report_viewer_holder", width: window.screen.width / 2, height: window.screen.height / 2, toolbar: true };
var viewer = rreport.viewer(options);
//---create document and attach it to viewer
var document = rreport.document();
viewer.setDocument(document);
//---generate report content
//Use inch
var INCH = document.getUnit();
//or Use mm
//var MM = INCH/25.4;
//page 1
var attr = { "font-size": 10, "font-family": "helvetica" };
document.drawString(INCH, INCH, "Hello World from Page 1", attr);
//page 2
document.addPage();
document.drawString(INCH, INCH, "Hello World from Page 2", attr);
//---preview page 1 (pageIndex = 0)
viewer.preview(0);
}
///////////////////////////////////////////////////////
window.onload = function () {
generate_report();
};
///////////////////////////////////////////////////////
</script>
</body>
</html>
rReport is database neutral and is not tied to a particular database for
maximum flexibility. You use SQL to retrieve data from your databases and supply the data
to rReport as strings. You can supply the data to the control
"on-demand" via Ajax, or "in-place" by storing the data in
the same web page. Here we discuss the latter only.
You can use a
hidden <textarea> tag to store the data . The following is an example.
<textarea id="data_holder" style="display: none">
[
["Sports Shoes"],
["Product ID", "Product Name", "Price"],
["1001","Tennis Shoes","$199.95"],
["1001","Soccer Shoes","$149.95"],
["1001","Basketball Shoes","$179.95"]
]
</textarea>
In this example, the data is in JSON format.
The example draws a table with the data. As you can see, the report generating code is much
more succinct than the conversional HTML tag building approach.
function generate_report(data) {
//---create viewer
var options = { container: "report_viewer_holder", width: 0.5 * window.screen.width, height: 0.6 * window.screen.height, toolbar: true };
var viewer = rreport.viewer(options);
//---create document and attach it to viewer
var document = rreport.document();
viewer.setDocument(document);
//---generate report content
var INCH = document.getUnit();
//draw page border
document.drawPageBorder();
//draw table
var attr = {
rows: ["row0", "row1", "row1", "row1", "row1"],
map: {
"row0": [{ width: 3 * INCH, style: "cell0" }],
"row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
"cell0": { "text-align": "center", "font-size": 24, "font-family": "helvetica", padding: 5 },
"cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica", padding: 2, border: true }
},
border: false
};
document.drawTable(2.75 * INCH, 2 * INCH, data, attr);
//---preview current page (page 1; pageIndex = 0)
viewer.preview();
}
window.onload = function () {
var v = document.getElementById("data_holder").value;
var data = JSON.parse(v);
generate_report(data);
};
The complete web page is in Sample 2.
var attr = { "font-size": 32, "font-family": "helvetica" };
var line1 = "Hello World from Line 1";
var line2 = "Hello World from Line 2";
var size = doc.calcString(line1, attr);
var y = INCH;
doc.drawString(INCH, y, line1, attr);
doc.drawString(INCH, y + size.height, line2, attr);
//create new document
var doc = rreport.document();
doc.setName("report1");
Gets a boolean value for placing grid on each page or not.
getGrid()
var bGrid = doc.getGrid();
Document Attributes and Control
var margin = doc.getMargin();
var top = margin.top;
var bottom = margin.bottom;
var left = margin.left;
var right = margin.right;
Document Attributes and Control
var documentName = doc.getName();
Document Attributes and Control
var size = doc.getPageSize();
var width = size.width;
var height = size.height;
Document Attributes and Control
var INCH = doc.getUnit();
var MM = INCH/25.4;
//draw in inch
doc.drawString(INCH, INCH, "Hello World");
//draw in mm
doc.drawString(MM, MM, "Hello World");
Document Attributes and Control
var pdfString = doc.exportPdf();
...
//1) submit pdfString to your web server by ajax
//or
//2) directly save pdfString to local computer
//as pdf file with doc.save(...) placed inside a user click/touch HTML element DOM event:
document.getElementId("saveButton").oncllick = function() {
doc.save("reportName1.pdf", pdfString);
};
Document Attributes and Control
var pdfObject = doc.exportPdfObject();
...
//save pdfObject to local computer
//as pdf file with doc.savePdf(...) placed inside a user click/touch HTML element DOM event:
document.getElementId("saveButton").oncllick = function() {
doc.savePdf("reportName1.pdf", pdfObject);
};
Document Attributes and Control
var docString = doc.exportDoc();
...
//1) submit docString to your web server by ajax
//or
//2) directly save docString to local computer
//as rReport format file with doc.save(...) placed inside a user click/touch HTML element DOM event:
document.getElementId("saveButton").oncllick = function() {
doc.save("rReportName1.rr.txt", docString);
};
Document Attributes and Control
where
docString: document string in rReport format
//get docString from your web server by ajax or from local file system with your dialog UI.
//then import it:
doc.importDoc(docString);
Document Attributes and Control
where
fileName: a string for output file name.
data: data in string data type to be saved to local file.
Document Attributes and Control
where
fileName: a string for output file name.
pdfObject: pdf object obtained by exportPdfObject.
Document Attributes and Control
where
flag: A boolean flag. true - place grid; false - do not.
doc.setGrid(true);
Document Attributes and Control
where
margin: a margin object (see example below)
var INCH = doc.getUnit();
var INCH4 = INCH/4;
var margin = { top: INCH4, bottom: INCH4, left: INCH4, right: INCH4 };
doc.setMargin(margin);
Document Attributes and Control
where
name: A string for document name.
doc.setGrid("Report1");
Document Attributes and Control
where
format: A string for paper size (format="letter" for Letter size; format="a4" for A4 size)
size: a size object with size.width and size.heigt for width and height.
//specify for Letter paper size
doc.setPageSize("letter");
//specify for A4 paper size
doc.setPageSize("a4");
//specify for custom paper size
var INCH = doc.getUnit();
var size = { width: 6*INCH, height: 4*INCH };
doc.setPageSize(size);
Document Attributes and Control
var pageCount = doc.addPage();
doc.clear();
doc.clearPage();
var pageCount = doc.getPageCount();
var pageIndex = doc.getPageIndex();
where
pageIndex: 0-based page index for the page to be removed.
//remove page with page index = 2
doc.removePage(2);
where
pageIndex: 0-based page index.
//set page with page index = 2 as current page
doc.setPageIndex(2);
where
id: id name in string for the object.
type: object type using one of the following strings.
arrow
circle
ellipse
image
line
lines
rect
string
table
text
x, y: object x and y in logical unit (point).
width, height: object width and heihgt in logical unit (point).
data:
For object type of string, text, and table, this is the same as the data parameter of drawString, drawText, and drawTable, respectively.
For image object, it is the dataURL for base64 image data.
For lines object, it is an array of points forming the lines.
For other object types, it is not used.
attr:
A javascript object specifying properties/attriubtes for the rReport object.
See example below, and also see Object Properties/Attributes.
var INCH = doc.getUnit();
doc.setPageIndex(0);
//---add string object
var attr = { "font-size": 10, "font-family": "helvetica" };
doc.addObject("strObject1", "string", INCH, INCH, 0, 0, "My String", attr);
//---add text object
var attr = { "font-size": 10, "font-family": "helvetica", "line-spacing": 1.5 };
doc.addObject("txtObject2", type, INCH, 2*INCH, INCH, 0, "My Text 1, My Text 2", attr);
//---add table object
var attr = {
rows: ["row0","row1"],
map: {
"row0": [{ width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }],
"row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
"cell0": { "text-align": "center", "font-size": 12, "font-family": "helvetica", "font-weight": "bold", "background-color": "#ffff00" },
"cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica"}
},
border: true
};
var data = [
["Header1", "Header2", "Header3"],
["col1", "col2", "col3"]
];
doc.addObject("tblObject3", "table", INCH, 3*INCH, 0, 0, data, attr);
//---add image object
var attr = { type: "jpg" };
doc.addObject("imgObject4", "image", INCH, 4*INCH, 1.5*INCH, INCH, dataURL, attr);
//---add line object
var attr = { "stroke": "#000000","stroke-width": 1 };
doc.addObject("linObject5", "line", INCH, 5*INCH, 2*LINE, 6*INCH, "", attr);
//---add lines object
var attr = { "stroke": "#000000","stroke-width": 1 };
var data = [[INCH, INCH], [1 * INCH, 2 * INCH], [2 * INCH, 1 * INCH]];
//or
//var data = [INCH, INCH, 1 * INCH, 2 * INCH, 2 * INCH, 1 * INCH];
doc.addObject("lnsObject6", "lines", 0, 0, 0, 0, data, attr);
//---add rect object
var attr = { "stroke": "#000000", "fill": "#ffffff" };
control.addObject("rctObject7", "rect", INCH, 7*INCH, 2*INCH, 1*INCH, "", attr);
//---add circle object
var attr = { "stroke": "#000000", "fill": "#ff0000" };
doc.addObject("cirObject8", "circle", INCH, 8*INCH, INCH, INCH, "", attr);
//---add ellipse object
var attr = { "stroke": "#000000", "fill": "#ff0000" };
doc.addObject("elpObject9", "ellipse", INCH, 9*INCH, 2*INCH, INCH, "", attr);
//---add arraw object
var attrLine = { fill: "#ff0000", stroke: "#000000" };
var attr = { line: attrLine, start: attrLine, end: attrLine, headWidth: INCH * 0.25, headLength: INCH * 0.25 };
doc.addObject("arrObject10", "arrow", INCH, INCH, 2 * INCH, 3 * INCH, "", attr);
document: Object Attributes and Control
where parameters are the same as those in drawString.
var attr = { "font-size": 10, "font-family": "helvetica" };
var data = "Hello World";
var size = doc.calcString(data, attr);
var width = size.width;
var height = size.height;
document: Object Attributes and Control
where parameters are the same as those in drawTable.
//---calculate table that remains on a single page
//see data, attr in addObject example
var size = doc.calcTable(data, attr);
var width = size.width;
var height = size.height;
//---calculate table that is split into multiple pages
//see data, attr in addObject example
//specify y postion for the first part of the table
attr.y = 3 * INCH;
//specify that the table will be split if needed
attr.split = true;
var tables = doc.calcTable(data, attr);
//draw sub-tables on multiple pages
var c = tables.length;
var x = 0.5 * INCH;
for (var i = 0; i < c; i++) {
var table = tables[i];
if (i > 0) {
doc.addPage();
}
doc.drawTable(x, table.y, table, attr);
}
document: Object Attributes and Control
where parameters are the same as those in drawText.
var INCH = doc.getUnit();
//specify text widht (paragraph width)
var width = INCH;
var data = "long text to be wrapped into multiple text lines via text object width.";
var attr = { "font-size": 10, "font-family": "helvetica", "line-spacing": 1.5 };
var size = doc.calcText(data, width, attr);
//width already known
//var width = size.width;
var height = size.height;
document: Object Attributes and Control
where
x1, y1: arrow starting point
x2, y2: arrow ending point
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attrLine = { fill: "#ff0000", stroke: "#000000" };
var attr = { line: attrLine, start: attrLine, end: attrLine, headWidth: INCH * 0.25, headLength: INCH * 0.25 };
doc.drawArrow(INCH, INCH, 2 * INCH, 3 * INCH, attr);
document: Object Attributes and Control
where
x, y: top-left corner of bounding square for the circle
width: width of bounding square for the circle
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attr = { fill: "#ff0000", stroke: "#000000" };
doc.drawCircle(INCH, INCH, 0.5*INCH, attr);
document: Object Attributes and Control
where
x, y: top-left corner poistion of bounding rectangle for the ellipse
width, height: width and height of bounding rectangle for the ellipse
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attr = { fill: "#ff0000", stroke: "#000000" };
doc.drawEllipse(INCH, INCH, 2*INCH, 1*INCH, attr);
document: Object Attributes and Control
where
x, y: top-left corner poistion of image
width, height: width and height of image
dataURL, dataURL of image.
You may use your ajax to get image's dataURL from your web server.
attr: a javascript object specifying properties for drawing the object. See Object Properties.
//retrieve your image's dataURL with ajax from your web server
//for your convenience
//rr.action.getDataURL(imageURL, funciton(dataURL){
// //your code here for what to do with the dataURL
//});
var INCH = doc.getUnit();
var attr = { type: "jpg" };
doc.drawImage(INCH, INCH, 2*INCH, , 1*INCH, dataURL, attr);
document: Object Attributes and Control
where
x1, y1: line start point
x2, y2: line end point
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attr = { stroke: "#000000", "stroke-width": 2 };
doc.drawLine(INCH, INCH, 2*INCH, 1*INCH, attr);
document: Object Attributes and Control
where
data: array for points that form the lines.
data = [x1,y1,x2,y2,....];
or
data = [[x1,y1],[x2,y2],....];
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
//closed lines (first and last points connected)
var attr = { fill: "#ff0000", stroke: "#000000", closed: true };
//open lines (first and last points not connected)
//var attr = { fill: "#ff0000", stroke: "#000000", closed: false };
var data = [[INCH, INCH], [1 * INCH, 2 * INCH], [2 * INCH, 1 * INCH]];
//or
//var data = [INCH, INCH, 1 * INCH, 2 * INCH, 2 * INCH, 1 * INCH];
doc.drawLines(data, attr);
document: Object Attributes and Control
where
attr: a javascript object specifying properties for drawing the object. See Object Properties.
//draw top and bottom borders
var attr = { stroke: "#000000", "border-top": true, "border-bottom": true};
doc.drawPageBorder(attr);
document: Object Attributes and Control
where
data: array specifying left, center, and right footer text
data = ["leftText", "centerText", "rightText"];
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var data = ["leftText", "centerText", "rightText"];
var attr = { "font-size": 10, "font-family": "helvetica", yShift: 0 };
doc.drawPageFooter(data, attr);
document: Object Attributes and Control
where
data: array specifying left, center, and right header text
data = ["leftText", "centerText", "rightText"];
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var data = ["leftText", "centerText", "rightText"];
var attr = { "font-size": 10, "font-family": "helvetica", yShift: 0 };
doc.drawPageFooter(data, attr);
document: Object Attributes and Control
where
x, y: top-left corner of rectangle.
width, height: width and height of rectangle.
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attr = { fill: "#ff0000", stroke: "#000000" };
doc.drawRect(INCH, INCH, 2*INCH, 1*INCH, attr);
document: Object Attributes and Control
where
x, y: object x and y in logical unit (point);.
data: a string to be drawn.
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attr = { "font-size": 10, "font-family": "helvetica", rotation: 0 };
doc.drawString(INCH, INCH, "Hello World", attr);
document: Object Attributes and Control
where
x, y: object x and y (top-left corner of table) in logical unit (point).
data: array containing text to be drawn.
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
var attr = {
rows: ["row0","row1"],
map: {
"row0": [{ width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }],
"row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
"cell0": { "text-align": "center", "font-size": 12, "font-family": "helvetica", "font-weight": "bold", "background-color": "#ffff00" },
"cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica"}
},
border: true
};
var data = [
["Header1", "Header2", "Header3"],
["col1", "col2", "col3"]
];
doc.drawTable(INCH, 3*INCH, data, attr);
document: Object Attributes and Control
where
x, y: object x and y in logical unit (point).
width: object width in logical unit (point).
attr: a javascript object specifying properties for drawing the object. See Object Properties.
var INCH = doc.getUnit();
//note: width may not be set to too small to cause possible text wrapping issue.
var width = INCH;
var attr = { "font-size": 10, "font-family": "helvetica", "line-spacing": 1.5 };
var data = "text that may be wrapped.";
doc.drawText(INCH, 2*INCH, width, data, attr);
document: Object Attributes and Control
where
id: object id string
//---fill out report template by setting new data
//name
var o = doc.getObject("name");
o.set("data", "New name here");
//address
var o = doc.getObject("streetAddress");
o.set("data", "New street address here");
document: Object Attributes and Control
//loop through each object
var count = doc.getObjectCount();
for (var i=0; i < count; i++) {
var id = doc.getObjectId(i);
var o = doc.getObject(id);
}
document: Object Attributes and Control
where
index: 0-based index for object.
document: Object Attributes and Control
where
id: object id string.
var index = doc.getObjectIndex("addressId");
document: Object Attributes and Control
where
prefix: optional string as the prefix for the id.
var id = doc.getUniqueId("str");
var INCH = doc.getUnit();
var attr = { "font-size": 10, "font-family": "helvetica" };
var data = "Hello World";
doc.addObject(id, "string", INCH, INCH, 0, 0, data, attr);
//or
attr.id = id;
doc.drawString(INCH, INCH, data, attr);
//get object
var o = doc.getObject(id);
document: Object Attributes and Control
where
id: object id string.
var exist = doc.objectExists("addressId");
document: Object Attributes and Control
where
id: object id string.
doc.removeObject("addressId");
document: Object Attributes and Control
where
options = {container: viewerContainerId, width: viewerWidth, height: viewerHeight, toolbar: viewerToolbar }
viewerContainerId: id of an html div element that will hold the viewer.
viewerWidth, viewerHeight: viewer width and height in pixels.
viewerToolbar: a boolean value or javascript object for specifying toolbar for the viewer.
viewerToolbar=true for displaying the toolbar; viewerToolbar={"saveButton": true} will display a toolbar button that saves rReport format document
to local file system.
Alternatively, you may implement your own toolbar for the viewer. The viewer class provides necessary methods and events for you to do so.
//create new instance of viewer
var options = { container: "report_viewer_holder", width: window.screen.width / 2, height: window.screen.height / 2, toolbar: true };
//var options = { container: "report_viewer_holder", width: window.screen.width / 2, height: window.screen.height / 2, toolbar: {"saveButton" : true} };
var viewer = rreport.viewer(options);
//create and attach document to viewer
var doc = rreport.document();
viewer.setDocument(doc);
where
size: a size object for specifying how to zoom the page for preview.
size = {width: pagePreviewWidth} will set page preview width to pagePreviewWith in pixels;
size = {height: pagePreviewHeight} will set page preview height to pagePreviewHeight in pixels;
size = {width: -1} will set page preview width to fit viewer's width;
size = {height: -1} will set page preview height to fit viewer's height.
//set preview page width
var size = {width: screen.width};
//set preview page height
var size = {height: screen.height};
//fit preview page width to viewer's width
var size = {width: -1};
//fit preview page height to viewer's height
var size = {height: -1};
var zoom = viewer.calcZoom(size);
viewer.setZoom(zoom);
viewer.clear();
where
xc, yc: (x,y) coordinates relative to page top-left corner on the screen in pixels.
point: returned point object with point.x and point.y as page coordinates in logical units.
[c0,c1,c2,...]: array of values relative to page top-left corner on the screen in pixels.
pArray: returned array with pArray=[p0,p1,p2,...] as page coordinates in logical units.
var point = viewer.clientToPage(100, 200);
var xp = point.x;
var yp = point.y;
var pArray = viewer.clientToPage([100, 200]);
var xp = pArray[0];
var yp = pArray[1];
var size = viewer.getClientSize();
var width = size.width;
var height = size.height;
var doc = viewer.getDocument();
where
x, y: (x, y) coordinates of a point in logical units (points).
var INCH = doc.getUnit();
var o = viewer.getHitObject(INCH, INCH);
if (o) {
var id = o.getId();
var data = o.get("data");
}
var mouseScroll = viewer.getMouseScroll();
var objectEdit = viewer.getObjectEdit();
var pos = viewer.getScrollPos();
//horizontal scroll position in the range of 0 and 1.0.
var horizontalPos = pos.horz;
//vertical scroll position in the range of 0 and 1.0.
var verticalPos = pos.vert;
var size = viewer.getViewSize();
var width = size.width;
var height = size.height;
//get inch in pixels
var INCH = viewer.getUnit();
var zoom = viewer.getZoom();
where
xp, yp: (x,y) coordinates relative to page top-left corner on the physical page in logical units (points).
point: returned point object with point.x and point.y as page screen coordinates in pixels.
[p0,p1,p2,...]: array of values relative to page top-left corner on the physical page in logical units (points).
cArray: returned array with cArray=[c0,c1,c2,...] as client coordinates in pixels.
var point = viewer.pageToClient(100, 200);
var xc = point.x;
var yc = point.y;
var cArray = viewer.pageToClient([100, 200]);
var xc = cArray[0];
var yc = cArray[1];
where
pageIndex: 0-based page index for the page to be previewed. The previewed page will become the current page.
If there is no argument for the method, the curret page will be previewed.
//preview current page
viewer.preview();
//preview page with pageIndex = 3 and set the page as current page
viewer.preview(3);
viewer.renderClear();
where
size: preview page size with size.width and size.height in pixels.
var width = 800;
var height = (11/8.5) * width;
var size = { width: width, height: height };
viewer.setClientSize(size);
where
cursor: an html supported cursor name.
viewer.setCursor("pointer");
where
doc: an instance of rReport document.
//create a new instance of document
var doc = rreport.document();
//attach document to viewer
viewer.setDocument(doc);
where
flag: a boolean value. true for making the viewer interactive or false for otherwise.
viewer.setInteractive(true);
where
flag: a boolean value for enabling preview page scroll by mouse dragging of the preview page.
viewer.setMouseScroll(true);
where
flag: a boolean value for enabling the viewer as object editing control.
viewer.setObjectEdit(true);
where
scroll: an object for setting scrollbar positions.
scroll = { horz: horzPos, vert: vertPos } with horzPos and vertPos in the range of 0 and 1.0.
If horz or vert property is missing, the corresponding scroll bar position will not be set and updated.
//set horz pos
var scroll = { horz: 0.5 };
viewer.setScrollPos(scroll);
//set vert pos
var scroll = { vert: 0.5 };
viewer.setScrollPos(scroll);
//set both horz and vert
var scroll = { horz: 0.5, vert: 0.5 };
viewer.setScrollPos(scroll);
where
size: viewer size.
size = { width: viewerWidth, height: viewerHeight }
with viewerWidth and viewerHeight in pixels.
var size = { width: screen.width/2, height: screen.height/2 };
viewer.setViewSize(size);
//set zoom to 200%
var zoom = 2.0;
viewer.setZoom(zoom);
where
all the parameters are the same as those in rreport.document.addObject
var INCH = doc.getUnit();
var attr = { "font-size": 10, "font-family": "helvetica" };
viewer.addObject("strObject1", "string", INCH, INCH, 0, 0, "My String", attr);
Viewer-as-Designer Attributes and Control
var items = viewer.getSelectedObjects();
for (var i=0; i < items.length; i++) {
var o = items[i];
var id = o.getId();
var data = o.get("data");
}
Viewer-as-Designer Attributes and Control
viewer.selectAll();
Viewer-as-Designer Attributes and Control
where
id: object id string.
viewer.selectObject("strObject1");
Viewer-as-Designer Attributes and Control
where
ids: object id array.
var ids = ["objectId1", "objectId2", "objectId3"];
viewer.selectObjects(ids);
Viewer-as-Designer Attributes and Control
viewer.storePage();
Viewer-as-Designer Attributes and Control
viewer.toBack();
Viewer-as-Designer Attributes and Control
viewer.toFront();
Viewer-as-Designer Attributes and Control
viewer.updateInteractive();
Viewer-as-Designer Attributes and Control
where
id: object id string.
viewer.updateObject("strObject1");
Viewer-as-Designer Attributes and Control
where
handler: event handler.
handler = function(eventType, obj) {}
with eventType for identifying event type and obj for the event passed info.
var handler = function (eventType, obj) {
switch (eventType) {
case "mousemove":
var control = viewer;
//check mouse position if it hits an object, change the mouse cursor
if (!control.getObjectEdit()) {
var o = control.getHitObject(obj.pos.x, obj.pos.y);
var cursor = o ? "pointer" : "default";
control.setCursor(cursor);
}
break;
case "mousedown":
var control = viewer;
if (!control.getObjectEdit()) {
var o = control.getHitObject(obj.pos.x, obj.pos.y);
if (o) {
alert("click on " + o.getId());
}
}
break;
case "mouseup":
break;
case "dblclick":
break;
}
};
//set event handler
viewer.setListener(handler);
//get toolbar
var toolbar = viewer.getToolbar();
//get document
var doc = viewer.getDocument();
//replace default event hander
toolbar.listen(function (eventId, obj) {
var pageIndex = doc.getPageIndex();
var pageCount = doc.getPageCount();
//control.clear();
switch (eventId) {
//downlad print button
case "download_print":
break;
case "first":
doc.setPageIndex(0);
break;
case "prev":
pageIndex -= 1;
doc.setPageIndex(pageIndex);
break;
case "next":
pageIndex += 1;
doc.setPageIndex(pageIndex);
break;
case "last":
doc.setPageIndex(pageCount - 1);
break;
case "page_index":
var index = obj.index;
doc.setPageIndex(index);
break;
case "fitwidth":
toolbar.setZoomIndex(0);
var zoom = control.calcZoom({ width: -1 });
control.setZoom(zoom);
break;
case "fitpage":
toolbar.setZoomIndex(1);
var zoom = control.calcZoom({ height: -1 });
control.setZoom(zoom);
break;
case "zoom_index":
var index = obj.index;
if (!rr.string.isNumeric(index)) { return; }
if (index == 0) {
var zoom = control.calcZoom({ width: -1 });
control.setZoom(zoom);
}
else if (index == 1) {
var zoom = control.calcZoom({ height: -1 });
control.setZoom(zoom);
}
else {
var zoom = rr.string.toFloat(obj.value) / 100;
control.setZoom(zoom);
}
break;
}
control.preview();
});
//get wait tool tip
var waitToolTip = viewer.getWaitTip();
//show tooltip
waitToolTip.show( {label: "Please wait....", image: true} );
//hide tooltip
waitToolTip.hide();
Interaction with Database: your web server stores the data in a
hidden <textarea> tag, and the control grabs the data and generates the
report.
<!DOCTYPE html>
<html>
<head>
<title>rReport Sample 2</title>
<script type="text/javascript" src="lib/rreport.min.js"></script>
<script type="text/javascript">
///////////////////////////////////////////////////////
function generate_report(data) {
//---create viewer
var options = { container: "report_viewer_holder", width: 0.5 * window.screen.width, height: 0.6 * window.screen.height, toolbar: true };
var viewer = rreport.viewer(options);
//---create document and attach it to viewer
var document = rreport.document();
viewer.setDocument(document);
//---generate report content
var INCH = document.getUnit();
//draw page border
document.drawPageBorder();
//draw table
var attr = {
rows: ["row0", "row1", "row1", "row1", "row1"],
map: {
"row0": [{ width: 3 * INCH, style: "cell0" }],
"row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
"cell0": { "text-align": "center", "font-size": 24, "font-family": "helvetica", padding: 5 },
"cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica", padding: 2, border: true }
},
border: false
};
document.drawTable(2.75 * INCH, 2 * INCH, data, attr);
//---preview current page (page 1; pageIndex = 0)
viewer.preview();
}
///////////////////////////////////////////////////////
window.onload = function () {
var v = document.getElementById("data_holder").value;
var data = JSON.parse(v);
generate_report(data);
};
///////////////////////////////////////////////////////
</script>
</head>
<body>
<div id="report_viewer_holder" style="margin-top:3em;"></div>
<textarea id="data_holder" style="display: none">
[
["Sports Shoes"],
["Product ID", "Product Name", "Price"],
["1001","Tennis Shoes","$199.95"],
["1001","Soccer Shoes","$149.95"],
["1001","Basketball Shoes","$179.95"]
]
</textarea>
</body>
</html>
[end of documentation]