Export Jasper Report Into Specific Formats Using Visualize.js In JasperSoft

Export Jasper Report Into Specific Formats Using Visualize.js In JasperSoft

Pre-requisites: Used Notepad++ to create html file and jasper server enterprise 6.3 version.

In jasper server for a particular jasper report we have specific options to export the report. When user wants to embed the specific jasper report in their application and if they have requirements to add export options, Then please follow below steps to create the same i.e export the jasper report in different formats.

In this bolg, I will explain how to export the Jasper report into different formats like pdf,excel using visualize.js and html file.

Step 1: Create a HTML file and add dropdown button for export options

<ul class="dropdown-menu">
<li><button id="pdf" class="export" value="pdf">PDF</button></li>
<li><button id="xls" class="export" value="xls">Excel</button></li>
<li><button id="csv" class="export" value="csv">CSV</button></li>
</ul>

I have created a dropdown list contains three buttons. In this case i have used pdf, export and csv options

Step2: Create a div container to render the report

<div id="container"></div>

Step3: Add visualize.js for the jasper server instance in html file and add all required css and js files.

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://localhost:8083/jasperserver-pro/client/visualize.js"></script>

Step4: Create visualize object, authenticate using user credentials and render the particular report in container div.
In this case i have sample report in jasper server public repository

visualize({
auth: {
name: "username",
password: "password"
}
}, function (v) {

//render report from provided resource
report = v.report({
container : "#container",
resource: "/public/Samples/Reports/ProfitDetailReport",
error: function(err){
alert(err.message);
}
});

Step5: Create export function and add the below code
//exporitng report into specific format

$(".export").click(function () {
var formatType = this.id;
report.export({
//export options here
outputFormat: formatType,
}, function (link) {
var url = link.href ? link.href : link;
window.location.href = url;
}, function (error) {
console.log(error);
});
});

Explanation:
$(“.export”) –> I have created a class name export for all three export options. So whenever user clicked on eithe of these three buttons this function will call.
var formatType = this.id –> Each of the export options has a unique id and this will return the particular id when the user clicked on export options
for example if user clicked on “excel” button, id will return ‘xls’ value
Create a report.export object and the specific outputFormat

Step6: Run the html and try to export the report using different options

Regards
Vdugula Ramu
BI Developer

Free Open Source BI Platform

• AI-Powered Analytics
• Embedded Analytics
• Single Sign-On (SSO)
• Multi-Tenancy
• Paginated Canned Reporting
• Interactive Dashboard
• White Labeling

Download Free