Generate Reports Using JSReport and Browser Client

Introduction

 
The purpose of this document is to find an alternative to generate online reports with client-side technologies like HTML, JavaScript, and CSS.
 

Pre-requisite

 
Node.js to run jsreport Server. (Follow the below steps to install node.js Server)
 
The only prerequisite to run jsreport server is node.js on target machine. The installation is initiated using npm. Follow the below guidelines to generate PDF report using jsreport server.
  1. Installing Node.JS Server and jsreport
  2. Reporting with browser-client
Installing Node.JS Server and jsreport
  1. Install js latest version on target machine. (https://nodejs.org/en/)
     
    (Download the latest version i.e. currently v7.10.0 Current). This will install a *.msi file . Follow the installation steps to install the package. (The approximate file size is 13 MB)
     
  2. Create a folder with any name in D: drive. (Which is an installation folder for jsreport).
     
    (E.g. jsreportServer)
  1. Open Node.JS command prompt in administrator mode and set the above folder as shown below to install jsreport software.
     
    image1
     
  2. Run the following command in command prompt (this may take some time to install the required files)
     
    npm install jsreport-cli –g 
     
    image2
     
  3. After successful installation, please run the following command to initialize jsreport server
     
    jsreport init 
     
    After initialization completes, the command prompt looks like below.
     
    image3
     
    image4
     
    image5
     
  4. Now you can start your jsreport server locally with the following command and should see the second screen shot
     
    jsreport start
     
    image6
     
    image7
     
  5. By default, the jsreport server runs on port 5488. We can change the port by modifying the configuration file in root folder (e.g. D:\jsreportServer)
    • If we are running the server in development mode, we need to update the port in config.json file.
    • If we are running the server in production mode update the port in config.json file.
  1. We can check the running jsreport server on target machine using http://localhost:5488.
     
    image8
     

Reporting with browser-client

  1. Create a new template in jsreport server by,
     
    1. Clicking on “templates +” in the above screen and name it “Employee” as shown in the below screen.
       
      image9
       
    2. Open the created template and copy the below code in it.
       
      image10
       
    3. If you want to add some styling to the template, you can add the CSS file in “assets +” and refer the styles in the template created above.
       
    4. You have to set the properties for the new template to recipe “phantom-pdf”
       
      image11
       
    5. Now, click “Save / Save All” button to save the data
  1. Now open Visual Studio or any editor to create a sample web application.
     
  2. Create a file with the name “HTML” and add a placeholder to display the report in HTML page.
    1. <input type="button" title="test" onclick="generateReport();" value="Get PDF Report"/>    
    2.  <div id="placeholder" style="height:900px;"></div>   
  1. Make sure you add js latest script file from GitHub (https://github.com/jsreport/jsreport-browser-client-dist/releases).
  1. If you are running on localhost with the default port, add the below code in <script> tags
    1. jsreport.serverUrl = 'http://localhost:5488';     
    2. //URL path in which jsreport server runs    
    3. /* For the sample purpose, the below JSON can be used. But in real time this data should come from Web API calls */    
    4.     
    5. var json_data = {    
    6.         "employees": [{    
    7.             "   id""100",    
    8.                 "name""Prasad Kambhammettu",    
    9.                 "designation""Developer",    
    10.                 "exp""6"    
    11.             },    
    12.             {    
    13.                 "id""101",    
    14.                 "name""Srinivas",    
    15.                 "designation""Architect",    
    16.                 "exp""9"    
    17.             },    
    18.             {    
    19.                 "id""102",    
    20.                 "name""Mallikarjun",    
    21.                 "designation""Web Developer",    
    22.                 "exp""3"    
    23.             },    
    24.             {    
    25.                 "id""103",    
    26.                 "name""Srivalli",    
    27.                 "designation""Test Engineer",    
    28.                 "exp""2"    
    29.             },    
    30.             {    
    31.                 "id""104",    
    32.                 "name""Sriram",    
    33.                 "designation""Trainee Engineer",    
    34.                 "exp""1"    
    35.             }    
    36.         ]    
    37. }    
    38.     
    39. function generateReport() {    
    40. var request = {    
    41.         template: {    
    42.               name: 'Employee'    
    43.              },     
    44.                    data: json_data    
    45.         };    
    46. jsreport.render($("#placeholder"), request);     
    47. // here ”placeholder” is div tag name in html page    
    48. }    
  1. Save the html page and run the web application
     
  2. Click on the “Get PDF Report” button to display the report on HTML page. The PDF should generate successfully and looks like below. 
     
    image12
     
  1. With the above steps we have successfully rendered a PDF file using simple JavaScript and jsreport server.

Advantages

  • jsreport supports multiple report formats like PDF, XLSX and HTML
  • jsreport can be an alternative for SQL Server Reporting Services reports
  • jsreport can be implemented by Microsoft, open source or java developers etc...
  • By default, this software allows to create five templates for free
Links
  1. Official Site - https://jsreport.net/
  2. Sample examples - https://playground.jsreport.net/studio/workspace/Sk35jrdx-/1
  3. Work with browser client - https://jsreport.net/learn/browser-client