JS realize preview with border and print without border

Usually when setting up a report, the border (content) display is often used to mark the cell display area, but it does not need to be displayed when printing. If we meet this demand, what should we do...? This document provides a solution to display the border when previewing, but not display the border (content) when printing.

Example 1:

Example 2: 

We can do this by adding the end of loading JS event.

Example 1 script:

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
    var td=tr.eq(i).children().eq(0);  
    td.removeClass("b0");  
    td.addClass("b1");  
    }  
for(var j=0;j<tr.eq(0).children().length;j++){  
    var td = tr.eq(0).children().eq(j);  
    td.removeClass("b0");  
    td.addClass("b1");  
    }

Example 2 script:

var tr = $("tr", $('div.content-container')); 
for(var i=0;i<tr.length;i++)
{
     for(var j=0;j<tr.eq(i).children().length;j++) 
     {
     //Get the td element, which is the cell on the page
       var td = tr.eq(i).children().eq(j);
       td.removeClass("b0"); td.addClass("b1");
     }
 }

Note: Because the border is ‘painted’ after the page is loaded, and the printed part of the content is the initial content of the printed page.

1. Example 1

Final effect: Add a border to a row and a column of content cells when previewing, no borders when printing! Take the first row and first column as an example:

1) Open the template %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\form\Simple Example.cpt, select the content cell, and set all the borders to No Boarder.

2) Select Template>Web Attributes>Data Entry Settings, and set separately for this template-Event Setting (Loading End), as shown in the figure below:

The JS code is as follows:

var tr = $("tr", $('div.content-container'));
for(var i=0;i<tr.length;i++){
        //Get the td element, which is the cell on the page, here is the first column
        var td=tr.eq(i).children().eq(0);
        td.removeClass("b0");
        td.addClass("b1");
        }
for(var j=0;j<tr.eq(0).children().length;j++){
        //Get the td element, which is the cell on the page, here is the first row
        var td = tr.eq(0).children().eq(j);
        td.removeClass("b0");
        td.addClass("b1");
        }

3) Save and preview, open and print in the form of filling report, the effect is shown in Figure 1 above.

2. Example 2

Final effect: Add borders to all content cells when previewing, no borders when printing.

1) Same as above, modify the loading end event JS code in the above example to:

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
         for(var j=0;j<tr.eq(i).children().length;j++)
         {  
        //Get the td element, which is the cell on the page
        var td = tr.eq(i).children().eq(j);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }   
        }

2) Save and preview, open and print in the form of filling report, the effect is shown in Figure 2 above.

The mobile terminal does not support various printing and exporting methods.

The completed template can be found in:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\FeaturesApplication\Simple Example.cpt 

Click to download the template:  Simple Example.cpt