Banana.Report.ReportStyleSheet

Dokumentation •
In diesem Artikel

The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.

Create a report stylesheet

A report stylesheet object is created using the function Banana.Report.newStylesheet().

// Create a new stylesheet for the report
var stylesheet = Banana.Report.newStyleSheet();

Page size and orientation

At this moment the report is rendered based on the page size defined in the default printer device.
You can't define a page size, but you can set the orientation with the Style @page.

Page orientation can't be set only once per report, you can't switch from potrait to landscape. 


var stylesheet = Banana.Report.newStyleSheet();
stylesheet.addStyle("@page").setAttribute("size", "landscape");

Methods

addStyle(selector)

Create a new style with the given selector. The return object is of type Banana.Report.ReportStyle.

The syntax of selector follows the CSS specification.

  • Style name without a preceding dot are reserved predefined tags like "td", "p", "table"
  • Style name for new class need a preceding point ".myStyle" in the addStyle method.
    The dot name is not used when adding the class name to the element

report.addParagraph("Text to print 24pt", "myStyle");
var style = stylesheet.addStyle(".myStyle");
myStyle.setAttribute("font-size", "24pt");
myStyle.setAttribute("text-align", "center"); 

report.addCell("Text to print");
var styleTd = stylesheet.addStyle("td");
styleTd.setAttribute("font-weight", "bold");

 

addStyle(selector, attributes)

Create a new style with the given selector and attributes. The return object is of type Banana.Report.ReportStyle.

The syntax of selector and attributes follow the CSS specification.


var style2 = stylesheet.addStyle(".style2", "font.size: 24pt; text-align: center");
 

parse(text)

Load the styles from the given text. The text follow the CSS specification.


stylesheet.parse(
  "p.style1 {font-size:24pt; text-align:center;}" +
  "@page {size:A4 landscape;}"
  );

See the How to use CSS file  tutorial example.

The selector

The selector follows the css syntax, following you will find some examples:

SelectorSelected elements
.xyz

Select all elements with class xyz

NB.: When you set the class to a ReportElement you enter the name without '.'

tableSelect all tables
table.xyzSelect all tables with class xyz
table.xyz tdSelect all cells in tables with class xyz
 
Tag selectors
@pagepage
bodycontent of the report
pheadpage header
pfootpage footer
divsection
pparagraph
tabletable
captiontable caption
theadtable header
tbodytable body
tfoottable footer
trtable row
tdtable cell

 

You can get the tag of an element through the method getTag();

Function for adding styles

When you have multiple styles it would be helpful to add a function for all the styles you need. For example:

function exec() {
  // Create a new report object with the title "Report title"
  var report = Banana.Report.newReport("Report title");
  
  // Add example text for each style in the report
  report.addParagraph("Hello World", "title");           // Example text for title style
  report.addParagraph("Subtitle Example", "subtitle");   // Example text for subtitle style
  report.addParagraph("Header Example", "header");       // Example text for header style
  report.addParagraph("Data Example", "data");           // Example text for data style
  report.addParagraph("Centered Text Example", "centerAlign"); // Example text for center alignment
  report.addParagraph("Right-Aligned Text Example", "rightAlign"); // Example text for right alignment
  report.addParagraph("Footer Example", "footer");       // Example text for footer style

  // Create a new stylesheet object for the report
  var stylesheet = Banana.Report.newStyleSheet();

  // Call the function to define and apply styles to the stylesheet
  addStyles(stylesheet);

  // Display the report in a preview window with the applied stylesheet
  Banana.Report.preview(report, stylesheet);
}

// Function that defines all the CSS styles for the report elements
function addStyles(stylesheet) {
    // Style for headers: bold font and a bottom border
    stylesheet.addStyle(".header", "font-weight: bold; border-bottom: 1px solid black;");
    
    // Style for data cells: padding and a light bottom border
    stylesheet.addStyle(".data", "padding: 5px; border-bottom: 0.5px solid #ddd;");
    
    // Style to center-align text
    stylesheet.addStyle(".centerAlign", "text-align: center");
    
    // Style to right-align text
    stylesheet.addStyle(".rightAlign", "text-align: right");
    
    // Style for the main title: larger font, bold, centered, with top margin
    stylesheet.addStyle(".title", "font-size: 16px; font-weight: bold; text-align: center; margin-top: 20px;");
    
    // Style for subtitles: smaller font, centered, with bottom margin
    stylesheet.addStyle(".subtitle", "font-size: 10px; text-align: center; margin-bottom: 20px;");
    
    // Style for the footer: small font, centered, with top margin
    stylesheet.addStyle(".footer", "text-align: center; font-size: 8px; margin-top: 20px;");
}

 

 

Helfen Sie uns, unsere Dokumentation zu verbessern

Ihre Anregungen, wie wir diese Seite verbessern könnten, sind uns jederzeit willkommen.

Sagen Sie uns bitte, welches Thema eine bessere Erklärung braucht oder wie wir ein Argument verständlicher erklären könnten.

Diesen Artikel teilen: Twitter | Facebook | LinkedIn | Email