render large report

by Stas_P

HTML

<script src="http://localhost:8710/jasperserver-pro/client/visualize.js"></script>

<div id="report" class="resource_report">
<div id="report-params" class="resource-params"></div>
<div id="report-content" class="resource-content"></div>
</div>

CSS

/* div.resource_report {
    height: 88vh;
    width: 89.8vw;
    padding: 0;
} */

div.resource-content {
    height: 88vh;
    width: 79vw;
    margin-left: 10.8vw;
    padding: 0;
    background-color: lightgreen;
}


div.resource-params {
    height: 88vh;
    width: 10vw;
    margin-left: .5vw;
    margin-right: .5vw;
    float: left;
    padding: 0;
    background-color: lightgrey;
}

JavaScript

/* const reportDomElement = document.getElementById("report");
reportDomElement.innerHTML = '';

const paramsDiv = document.createElement('div');
paramsDiv.id = "report-params";
paramsDiv.className = "resource-params";
reportDomElement.appendChild(paramsDiv);

const contentDiv = document.createElement('div');
contentDiv.id = "report-content";
contentDiv.className = "resource-content";
reportDomElement.appendChild(contentDiv); */


visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    var report = v.report({
//        resource: "/public/Reports/LargerWidthProblemInEmbedding_1",
        resource: "/public/Samples/Reports/01._Geographic_Results_by_Segment_Report",
//				resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report",
        container: "#report-content",
        scale: "container",
        ignorePagination: false,
    });
    
});