Banana.Report.ReportStyleSheet

Dokumentation •
In diesem Artikel

The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.
It contains multiple Banana.Report.ReportStyle objects.

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",... ( e.g. 'addStyle("td")' )
  • Style name for a new custom class need a preceding dot "." ( e.g. 'addStyle(".myStyle")' )
    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.

Example of selectors:

  • .xyz
    Select all elements with class xyz. It is used with a preceding dot "." before the class name.
    When you set the class to a ReportElement you enter the name without "."
  • table
    Select all tables
  • table.xyz
    Select all tables with class xyz
  • table.xyz td
    Select all cells in tables with class xyz
Example of tag selectors:
  • @page
    Select the page
  • body
    Select the content of the report
  • phead
    Select the page header
  • pfoot
    Select the page footer
  • div
    Select the section
  • p
    Select the paragraph
  • table
    Select the table
  • caption
    Select the caption
  • thead
    Select the table header
  • tbody
    Select the table body
  • tfoot
    Select the table footer
  • tr
    Select the table row
  • td
    Select the table 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