Wednesday, April 17, 2013

Pin It


Get Gadget

How to show a Jasper report in your web page in PDF format

Jasper is a powerful tool which can be used to generate reports for several data sources. These data sources can be MySQL database, Oracle databases etc. In this article, I will show you how to give report on a MySQL database using Jasper as a PDF in your web site.

Pre - Requisites,

Following software and tools have to be in your pc,
Optional,
Say if you have a MySQL database which has the marks of a particular subject for a set of students.


If you want to give report about students marks as a chart, you can use Jasper for the task. I will show you how to give the student's marks graph as PDF in your web site using Jasper.

First task will be creating a Jasper report File(.jrxml) using iReport designer to generate the student marks chart.

Step 1 - Open iReport Designer and Click File - > New. Then select Report template and click the button Open this template.


Step 2 - Give a name to the report project and click next



Step 3 - The new report will be shown in the iReport designer. Click on the Report Datasources button and then click new button.




Step 4 - Click on the Database JDBC Connection an click next.




Step 5 - Select MySQL as JDBC driver type and enter the details for your database connection. Then click save button to go back to the report.



Step 6 - Click on the Report Query Button on the report and following UI will be shown. In that type the SQL query which you need to add to your report. I have used "select * from Marks".




Step 7 - When we typed the query, all the field will be retrieved automatically. Click the preview data button to view the data. Then click OK.




Step 8 - Drag and drop a Static TextBox from palette to the report and give title to the report. I have used "Student Marks".

Step 9 - Drag and drop a Chart from palette to the report's summary section . It will show following UI. In that select line chart.


Step 10 - In the next dialog click the edit button near the text Dummy Series to edit the name of the data series of the graph. I have used Student Marks as the data series name. An click apply and next.






Step 11 - In the next dialog click the edit button in the category expression to select the value set for the X axis of the chart.


Step 12 - In the next dialog, I have double clicked on the column name to add it as the data series for the X axis.



Step 13 - In the next dialog click the edit button in the value expression to select the value set for the Y axis of the chart. In the next dialog, I have double clicked on the column marks to add it as the data series for the Y axis. And  then click Finish.



Step 14 - Now you have completed your Jasper report. Click on the XML tab to view the jrxml file for the particular report and Preview tab to view the report.





Step 15 - Save your jrxml file in a known location. It will be needed to future steps.

Next step will be adding this report to a web page as PDF which user can view or download. For that I a going to create a web application using intelliJ IDEA. Please follow this tutorial to see how to create a web application and run it in Tomcat Server in IntelliJ IDEA. http://wiki.jetbrains.net/intellij/Creating_a_simple_Web_application_and_deploying_it_to_Tomcat.

Step 16 - Create a new Web Aplication Prject in IDEA

Step 17 - Create a new JSP file in it and name it as marksGraph.jsp.

Step 18 - Change the index.jsp as follows.


<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
  <head>
    <title></title>
  </head>
  <body>
    <a href="marksGraph.jsp">Show Students Marks Graph</a>
  </body>
</html>

Step 19- Download all these jars and add the to the lib folder inside your project - > web folder - > WEB-INF folder. Also add the jasperreports jar to the dependencies folder of your project.
Step 20 - Add the previously saved jrxml file to the web folder of your project.

Step 21 - Change the marksGraph.jsp as follows.

This code is responsible for load the jrxml file and generate the report. Also it writes the report to the web page as a PDF.

<%@ page contentType="application/pdf" %>

<%@ page trimDirectiveWhitespaces="true"%>

<%@ page import="net.sf.jasperreports.engine.*" %>
<%@ page import="java.io.File" %>
<%@ page import="java.io.FileInputStream" %>
<%@ page import="java.io.FileNotFoundException" %>
<%@ page import="java.io.InputStream" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>

<%
    Connection conn=null;
     try {
        //Connecting to the MySQL database

        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/Students?user=root&password=12345");

        //Loading Jasper Report File from Local file system

        String jrxmlFile = session.getServletContext().getRealPath(request.getContextPath())+"/GenerateReport.jrxml";
        InputStream input = new FileInputStream(new File(jrxmlFile));

        //Generating the report

        JasperReport jasperReport = JasperCompileManager.compileReport(input);
        JasperPrint jasperPrint = JasperFillManager.fillReport(jasperReport, null, conn);

        //Exporting the report as a PDF

        JasperExportManager.exportReportToPdfStream(jasperPrint, response.getOutputStream());

    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (JRException e) {
        e.printStackTrace();
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    } catch (SQLException e) {
        e.printStackTrace();
    }
    finally {
        if(conn!=null){
            conn.close();
        }
    }
%>

Step 22 - Cick on the run button to run this web application in Tomcat Server.



Step 23 - The newly deployed web application will be displyed in the web page like this,



Step 24 - Click on the Show Student Marks Graph link.

Step 25 - The students marks graph will be shown as a PDF like this,




Also please note that after saving the jrxml file using iReport designer, remove all the uuid tags of each and every element. Also you can use this kind of report generation logic in any web application. I have attached the source code of my sample web app here. https://www.dropbox.com/s/d8tk1midq4tdy7e/ReportGenerationWebApp.zip Hope this tutorial helped you. Comments and questions are welcomed.

19 comments:

  1. hi,

    just want to ask if you know how to set the title in the tab? ex. change the marksGraph.jsp tab title into something else.. i tried using METADATA_TITLE of JRPdfExporterParameter but it only works on Firefox browser. And is it also possible to add an icon on the tab? like fav icon?

    i would really appreciate it if you could help. thanks a lot.

    ReplyDelete
  2. hii my problem is after clicking the button in jsp report should generate. can anyone help me with that plz

    ReplyDelete
  3. Is there any Report design & generation plugin available for Intellij IDEA or not ?
    I am looking for it. Hope for reply soon.
    Thank You.

    ReplyDelete
  4. org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.lang.NoClassDefFoundError: Could not initialize class net.sf.jasperreports.charts.type.PlotOrientationEnum
    org.springframework.web.servlet.DispatcherServlet.triggerAfterCompletionWithError(DispatcherServlet.java:1280)
    org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:958)

    ReplyDelete
  5. hey what can i do if the data what i want to show is in Javascript file, how can i send it to my JSP ???? thanks

    ReplyDelete
  6. How do I fix this error: java.io.FileNotFoundException: C:\Users\Mwangi Thiga\marsworkspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\web\web\GenerateReport.jrxml (The system cannot find the path specified)
    ?

    ReplyDelete
  7. while running the program I am getting failed to load pdf document error

    ReplyDelete
  8. thanx admin..i think it will help me for creating my projects
    from Bigg Boss audition

    ReplyDelete
  9. great job, congratulations. I had some problems (exceptions) with your tutorial but I just solved by updating mysql connector jar and jasper report jars.

    ReplyDelete
  10. Supplements For Fitness to move. By making small changes constantly and different workouts and meals, you will not tire of healthy eating, and your body will continue to change for the better. Here are some tips that I recommend for clients; I have included those tips that those who have lost weight have found most

    ReplyDelete
  11. Pilpedia is supplying 100 percent original and accurate information at each moment of time around our site and merchandise, and the intent is to improve the usage of good and pure health supplement. For More Info please visit Pilpedia online store.

    ReplyDelete
  12. Yet, "Where work is critical, let it be done at once." Male Enhancement provides the elemental expertise one wants for Male Enhancement while I am going to possess to believe this concept. Double X Male Enhancement They were somewhat additional active once this.

    https://www.healthygnc.com/double-x-male-enhancement/

    https://www.healthygnc.com/

    ReplyDelete
  13. Get the answer for the query “ How To Get a Job in Infosys as a Fresher? ” with the real-time examples and best interview questions and answers from the best software training institute in Chennai, Infycle Technologies. Get the best software training and placement with the free demo and great offers, by calling +91-7504633633, +91-7502633633.

    ReplyDelete