JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<h4>PDF will automatically export for specified report.</h4>
<div id="App"></div>
React
function RenderVisualize () {
React.useEffect(function () {
visualize({
auth: {
name: "joeuser",
password: "joeuser",
organization: "organization_1"
}
}, function (v) {
var report = v.report({
resource: "/public/Samples/Reports/5g.AccountsReport",
success: function () {
report.export({
outputFormat: "pdf",
pages: {
anchor: "Newton"
}
}, function (link) {
let url = link.href ? link.href : link;
window.location.href = url;
}, function (error) {
console.log(error);
});
}
});
});
}, [])
return (
<div></div>
)
}
ReactDOM.render(<RenderVisualize />, document.querySelector("#App"))