How to Display JasperReports in a HTML webpage

Question

I've been having trouble getting my PDF JasperReport to display in a webpage. So far I can only figure out how to export it to a path on the users computer accessing my spring-maven project on eclipse based on CodeJava's "Spring Boot One To Many Tutorial with Thymeleaf, Bootstrap and MySQL Database" youtube tutorial. This is my code to generate/display report

@Service
public class ProductService {
    
    @Autowired
    private ProductRepository repo;
    @Autowired
    ServletContext context;
    
    /**
     * This method handles errors creating JasperReports
     * @return Success Message
     */
    public String viewReport() {
        Log.info("Preparing the pdf report via Jasper.");
        try {
            createPdfReport(repo.findAll());
            Log.info("File successfully saved at given path.");
        } catch (final Exception e) {
            Log.error("Some error has occured while preparing PDF document.");
            e.printStackTrace();
        }
        return "Done in ViewReport";
    }
    /**
     * This method creates a JasperReport of the products table
     * @param products Products
     * @throws JRException
     */
    public void createPdfReport(final List<Product> products) throws JRException {
        //HttpServletResponse response = ServletActionContext.getResponse();
        
        //Fetching .jrxml file from resources folder.
        final InputStream stream = this.getClass().getResourceAsStream("/Jasper_Report_final.jrxml");
        
        //compile report from .jrxml to .jasper
        final JasperReport report = JasperCompileManager.compileReport(stream);
        
        //Experimental Data Connection
        Connection conn = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost/Inventory");
        } catch (SQLException ex) {
        } catch (ClassNotFoundException ex) {

        }
        
        //Fetch users from the data source
        final JRBeanCollectionDataSource source = new JRBeanCollectionDataSource(products);
        
        //Adding the additional parameters to the pdf
        final Map<String, Object> parameters = new HashMap<>();
        parameters.put("CreatedBy", "edu.sru.Smith" );
        
        //filling report with data from database
        final JasperPrint print = JasperFillManager.fillReport(report, parameters, source);
        
        
        //place file in e:drive
        final String filePath = "E://CPSC-488";
        //export report to pdf file
        JasperExportManager.exportReportToPdfFile(print, filePath + "Employee_Report.pdf");
        
        //Display pdf file
        
        /*OutputStream outStream = res.getOutputStream();
        response.setContentType("application/pdf");
        out = response.getWriter();
        String filepath = "E://CPSC-488/Employee_Report.pdf";

        response.setHeader("Content-Disposition", "attachment;filename="+filepath+";");
        FileOutputStream fileOut = new FileOutputStream("D:/MyFolder/PDF/MyFile.pdf");

        fileOut.close();
        out.close();*/
        
    }
    
}

Here is my controller class calling the report

@Controller
public class ProductController {
    
    @Autowired
    private ProductRepository productRepo;
    
    @Autowired 
    private CategoryRepository categoryRepo;
    
    @Autowired
    private ProductService productservice;
    
    /**
     * This method handles calling the productService viewReport() method
     * @return Home Page
     */
    @GetMapping("/productreport")
    public String generateReport() {
        productservice.viewReport();
        
        return "indexRelational";
    }
    
}

Lastly is the HTML page that calls everything

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Inventory Homepage</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>
<body>
<div class="container text-center">
    <div><h1>Welcome to Inventory App</h1></div>
    
    <div class"p-2">
        <h1><a th:href="@{/productreport}" class="btn btn-info" role="button">Generate Product Report</a></h1>
    </div>

</div>
    
</body>
</html>

The commented out lines are some of the methods I have tried so far. So far I'm trying to eliminate the need for a file path, or at least create a dynamic one the user can specify, and then display that in a new webpage

How to Display JasperReports in a HTML webpage

0 Answers0