https://github.com/jsreport/jsreport-browser-client
jsreport client for browser
https://github.com/jsreport/jsreport-browser-client
Last synced: about 1 year ago
JSON representation
jsreport client for browser
- Host: GitHub
- URL: https://github.com/jsreport/jsreport-browser-client
- Owner: jsreport
- License: mit
- Created: 2016-03-11T16:33:41.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2021-08-20T16:55:36.000Z (almost 5 years ago)
- Last Synced: 2025-03-27T11:43:35.765Z (about 1 year ago)
- Language: JavaScript
- Size: 227 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**⚠️ This repository has been moved to the monorepo [jsreport/jsreport](https://github.com/jsreport/jsreport)**
--
# jsreport-browser-client
[](https://npmjs.com/package/jsreport-browser-client)
**Adds recipe html-with-browser-client which creates html output with attached [jsreport browser client script](https://github.com/jsreport/jsreport-browser-client-dist).**
The html output is then extended with [jsreport](https://github.com/jsreport/jsreport-browser-client-dist) global object. That can be used to invoke jsreport server rendering directly from the output report.
See the [jsreport-browser-client-dist](https://github.com/jsreport/jsreport-browser-client-dist) for API documentation.
## Export part of the report to PDF
The most simple scenario. You have html report but you want to additionally add controls for printing particular parts into PDF.
```html
Hello world
function print() {
jsreport.download('report.pdf', {
template: {
content: document.getElementById('printedArea').innerHTML,
engine: 'none',
recipe: 'phantom-pdf'
}});
}
```
## Drill down to sub report
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.
```html
Hello from master....
function detail() {
jsreport.render('_self', {name: 'detail', data: { detailId: 'foo' }});
}
```
The detail template can use data provided from the master template or use [custom script](http://jsreport.net/learn/scripts) to actively fetch required data. There can be also `back` button for navigating back to the master template.
```html
Hello from detail {{detailId}} ....
function detail() {
jsreport.render('_self', { template: { name: 'master'} })
}
```
The whole usecase can be implemented also through AJAX calls, this can prevent URL changes.
```js
jsreport.renderAsync({ template: { name: 'master'} }).then(function(r) {
document.open();
document.write(r.toString());
document.close();
});
```
## Editable templates
The last example shows how to use the [jsreport borwser client](https://github.com/jsreport/jsreport-browser-client-dist) to edit and preview the template in third party WYSIWYG editor.
```html
var template;
var templateName = 'My editable report template';
var data = { foo: '...' };
//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
});
});
}
```
## License
MIT