Generate Reports Using JSReport and Browser Client

Introduction

1. Installing Node.JS Server and jsreport
2. Reporting with browser-client

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)

7. Open Node.JS command prompt in administrator mode and set the above folder as shown below to install jsreport software.
   
8. Run the following command in command prompt (this may take some time to install the required files)
   npm install jsreport-cli –g
   
9. After successful installation, please run the following command to initialize jsreport server
   jsreport init
   After initialization completes, the command prompt looks like below.
   
   
   
10. Now you can start your jsreport server locally with the following command and should see the second screen shot
    jsreport start
    
    
11. 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.

8. We can check the running jsreport server on target machine using http://localhost:5488.
   

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.
      
   2. Open the created template and copy the below code in it.
      
   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”
      
   5. Now, click “Save / Save All” button to save the data

2. Now open Visual Studio or any editor to create a sample web application.
3. 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>

4. Make sure you add js latest script file from GitHub (https://github.com/jsreport/jsreport-browser-client-dist/releases).

5. 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 */
   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. }
   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. }

6. Save the html page and run the web application
7. Click on the “Get PDF Report” button to display the report on HTML page. The PDF should generate successfully and looks like below.
   

8. With the above steps we have successfully rendered a PDF file using simple JavaScript and jsreport server.

• 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

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