html-with-browser-client
creates html output with attached browser client script.
The html output is then extended with jsreport global object. That can be used to invoke jsreport server rendering directly from the output report.
See the browser client docs for API details.
The most simple scenario. You have html report but you want to additionally add controls for printing particular parts into PDF.
<div id='printedArea'>
<h1>Hello world</h1>
</div>
<input type='button' onclick='print()' value='print me'></input>
<script>
function print() {
jsreport.download('report.pdf', {
template: {
content: document.getElementById('printedArea').innerHTML,
engine: 'none',
recipe: 'phantom-pdf'
}});
}
</script>
Also very common scenario. The report is too complex to display at once and you want let the users to drill down to particular sections.
The master template can contain several links to the detail drill down. Every link can then render different template and also push additional information through data property.
Hello from master....
<input type='button' onclick='detail()' value='Drill down'></input>
<script>
function detail() {
jsreport.render('_self', {name: 'detail', data: { detailId: 'foo' }});
}
</script>
The detail template can use data provided from the master template or use custom script to actively fetch required data. There can be also back
button for navigating back to the master template.
Hello from detail {{detailId}} ....
<input type='button' onclick='window.history.back()' value='back'/>
<script>
function detail() {
jsreport.render('_self', { template: { name: 'master'} })
}
</script>
The whole usecase can be implemented also through AJAX calls, this can prevent URL changes.
jsreport.renderAsync({ template: { name: 'master'} }).then(function(r) {
document.open();
document.write(r.toString());
document.close();
});
The last example shows how to use the jsreport borwser client to edit and preview the template in third party WYSIWYG editor.
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<div>
<input type='button' value='Edit Template' id='editACE' onclick='edit()'/>
<input type='button' value='Save' id='refresh' onclick='refresh()'/>
</div>
<div id='editorBox'>
</div>
<div id="reportBox" >
</div>
<script>
var template;
var templateName = 'My editable report template';
var data = { foo: '...' };
jsreportInit = function() {
//load template definition so we can edit it's content
jsreport.getTemplateByName(templateName).then(function(r) {
template = r;
});
//also render into the preview pane
jsreport.render('reportBox', {
template: { name: templateName },
data: data
});
}
//open editor with the edited template content
function edit() {
tinymce.init({ selector:'#editorBox' });
tinyMCE.activeEditor.setContent(template.content);
}
//save the template with updated content and preview
function refresh() {
template.content = tinyMCE.activeEditor.getContent()
tinyMCE.activeEditor.destroy();
document.getElementById('editorBox').innerHTML = '';
jsreport.updateTemplate(template).then(function() {
jsreport.render('reportBox', {
template: { name: templateName },
data: data
});
});
}
</script>
The recipe by default serializes the input data into the global jsreport.data
javascript object. This can hurt performance if the data set is huge. In this case you can omit serializing data using property template.omitDataFromOutput
. This can be set in API call or also in jsreport studio.