{"id":18812561,"url":"https://github.com/jsreport/jsreport-browser-client","last_synced_at":"2025-04-13T21:25:39.804Z","repository":{"id":57286235,"uuid":"53680968","full_name":"jsreport/jsreport-browser-client","owner":"jsreport","description":"jsreport client for browser","archived":false,"fork":false,"pushed_at":"2021-08-20T16:55:36.000Z","size":232,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T11:43:35.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsreport.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-11T16:33:41.000Z","updated_at":"2021-08-20T16:55:39.000Z","dependencies_parsed_at":"2022-09-10T01:01:12.539Z","dependency_job_id":null,"html_url":"https://github.com/jsreport/jsreport-browser-client","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsreport%2Fjsreport-browser-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsreport%2Fjsreport-browser-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsreport%2Fjsreport-browser-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsreport%2Fjsreport-browser-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsreport","download_url":"https://codeload.github.com/jsreport/jsreport-browser-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248757550,"owners_count":21156952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T23:34:07.169Z","updated_at":"2025-04-13T21:25:39.767Z","avatar_url":"https://github.com/jsreport.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**⚠️ This repository has been moved to the monorepo [jsreport/jsreport](https://github.com/jsreport/jsreport)**\n--\n\n# jsreport-browser-client\n\n[![NPM Version](http://img.shields.io/npm/v/jsreport-browser-client.svg?style=flat-square)](https://npmjs.com/package/jsreport-browser-client)\n\n**Adds recipe html-with-browser-client which creates html output with attached [jsreport browser client script](https://github.com/jsreport/jsreport-browser-client-dist).**\n\nThe 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.\n\nSee the [jsreport-browser-client-dist](https://github.com/jsreport/jsreport-browser-client-dist) for API documentation.\n\n\n## Export part of the report to PDF\nThe most simple scenario. You have html report but you want to additionally add controls for printing particular parts into PDF.\n```html\n\u003cdiv id='printedArea'\u003e\n    \u003ch1\u003eHello world\u003c/h1\u003e\n\u003c/div\u003e\n\u003cinput type='button' onclick='print()' value='print me'\u003e\u003c/input\u003e\n\u003cscript\u003e\n    function print() {\n        jsreport.download('report.pdf', {\n          template: {\n              content: document.getElementById('printedArea').innerHTML,\n              engine: 'none',\n              recipe: 'phantom-pdf'\n        }});\n    }\n\u003c/script\u003e\n```\n\n\n## Drill down to sub report\nAlso very common scenario. The report is too complex to display at once and you want let the users to drill down to particular sections. \n\nThe 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.\n```html\nHello from master....\n\u003cinput type='button' onclick='detail()' value='Drill down'\u003e\u003c/input\u003e\n\n\u003cscript\u003e\n    function detail() {\n        jsreport.render('_self', {name: 'detail', data: { detailId: 'foo' }});\n    }\n\u003c/script\u003e\n```\n\nThe 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.\n```html\nHello from detail {{detailId}} ....\n\u003cinput type='button' onclick='window.history.back()' value='back'/\u003e\n\n\u003cscript\u003e\n    function detail() {\n        jsreport.render('_self', { template: { name: 'master'} })\n    }\n\u003c/script\u003e\n```\n\nThe whole usecase can be implemented also through AJAX calls, this can prevent URL changes.\n\n```js\njsreport.renderAsync({ template: { name: 'master'} }).then(function(r) {\n\tdocument.open();\n    document.write(r.toString());\n    document.close();\n});\n```\n\n\n## Editable templates\nThe 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.\n\n```html\n\u003cscript src=\"//cdn.tinymce.com/4/tinymce.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv\u003e\n    \u003cinput type='button' value='Edit Template' id='editACE' onclick='edit()'/\u003e\n    \u003cinput type='button' value='Save' id='refresh' onclick='refresh()'/\u003e\n\u003c/div\u003e\n\n\u003cdiv id='editorBox'\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"reportBox\" \u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n    var template;\n    var templateName = 'My editable report template';\n    var data = { foo: '...' };\n    \n    //load template definition so we can edit it's content\n    jsreport.getTemplateByName(templateName).then(function(r) {\n       template = r;\n    });\n \n    //also render into the preview pane\n    jsreport.render('reportBox', { \n      template: { name: templateName }, \n      data: data \n    });\n    \n    //open editor with the edited template content\n    function edit() {\n        tinymce.init({ selector:'#editorBox' });\n        tinyMCE.activeEditor.setContent(template.content);\n    }\n    \n    //save the template with updated content and preview\n    function refresh() {\n        template.content = tinyMCE.activeEditor.getContent()\n        tinyMCE.activeEditor.destroy();\n        document.getElementById('editorBox').innerHTML = '';\n        jsreport.updateTemplate(template).then(function() {\n            jsreport.render('reportBox', { \n\t            template: { name: templateName }, \n\t            data: data\n\t        });    \n        });\n    }    \n    \n\u003c/script\u003e\n```\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsreport%2Fjsreport-browser-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsreport%2Fjsreport-browser-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsreport%2Fjsreport-browser-client/lists"}