How to generate report with client application, webApi and jsreport embedded server.
-
I was trying to render jsreport on client application with embed.js reference from "../jsreport.axd?url=/extension/embedding/public/js/embed.js". I was getting all the data for report generation from webapi service, but when it starts rendering the response data it says template not defined. Any help appreciated.
-
hi! can you paste here the data that you are getting from your webapi service and the payload that you are passing to jsreport? maybe there is a wrong value somewhere.
-
The following is the response getting from WebApi. (Yesterday i had a typo mistake. It alerts "Failed to get a Template" not template not defined. Sorry for the inconvenience). My client application has only html & JavaScript pages. and may i know what is the payload? I am calling the render method as follows
jsreport.render($("#placeholder"), data); // Here "data" is the following response. Please have a look. Thanks in advance.
{"content":"\u003chtml\u003e\n \u003chead\u003e\t\n \u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cstyle\u003e\n .clip {\n -webkit-background-clip: padding-box;\n -moz-background-clip: padding;\n -o-background-clip: padding;\n background-clip: padding-box;\n }\n\n .clear {\n /* for use on: after */\n ;\n content: \" \";\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n }\n\n body {\n font-size: 14px;\n margin: 0px;\n text-align: center;\n background: #ddd;\n color: #333;\n font-family: Helvetica, Arial, sans-serif;\n padding: 40px 0;\n line-height: 1.5em;\n }\n\n a {\n color: #333;\n text-decoration: underline;\n }\n\n strong { font-weight: bold }\n\n em { font-style: italic }\n\n h1 {\n font-size: 28px;\n font-weight: bold;\n padding: 20px 0 0px;\n }\n\n h2, h3, h4, h5, h6, .title {\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 4px;\n margin-bottom: 4px;\n border-bottom: 1px solid #dddddd;\n }\n\n #invoice {\n position: relative;\n padding: 18px;\n max-width: 840px;\n margin: auto;\n background: #f5f5f5;\n border: 10px solid #fff;\n -webkit-box-shadow: 0 0 1px #888888;\n -moz-box-shadow: 0 0 1px #888888;\n -o-box-shadow: 0 0 1px #888888;\n box-shadow: 0 0 1px #888888;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n #invoice.unpaid:before, #invoice.paid:before {\n position: absolute;\n top: -20px;\n right: 0;\n left: 0;\n height: 10px;\n background: red;\n background: rgba(187, 0, 0, 0.8);\n content: \"\";\n }\n\n #invoice.paid:before {\n background: green;\n background: rgba(122, 185, 0, 0.7);\n }\n\n .this-is {\n padding: 8px 0;\n font-size: 16px;\n font-weight: bold;\n border-top: 1px solid #dddddd;\n border-bottom: 1px solid #dddddd;\n }\n\n #header { padding-bottom: 20px }\n\n .invoice-intro p {\n font-size: 12px;\n font-style: italic;\n line-height: 1.5em;\n padding-bottom: 20px;\n }\n\n .invoice-meta {\n position: relative;\n overflow: hidden;\n text-align: right;\n line-height: 1.5em;\n }\n\n .invoice-meta dt {\n float: left;\n width: 46%;\n clear: both;\n font-weight: bold;\n }\n\n .invoice-meta dd {\n width: 46%;\n float: right;\n text-align: left;\n }\n\n #parties {\n position: relative;\n overflow: hidden;\n }\n\n .invoice-to, .invoice-from, .invoice-status {\n text-align: left;\n padding-bottom: 30px;\n }\n\n .paid .invoice-status strong {\n background: green;\n background: rgba(122, 185, 0, 0.7);\n }\n\n .invoice-items, .invoice-totals {\n text-align: left;\n padding-bottom: 30px;\n }\n\n .invoice-items table, .invoice-totals table {\n width: 100%;\n font-size: 12px;\n }\n\n .invoice-items caption, .invoice-totals caption {\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 4px;\n margin-bottom: 4px;\n border-bottom: 1px solid #dddddd;\n text-align: left;\n }\n\n .invoice-items thead th, .invoice-totals thead th {\n font-weight: bold;\n padding: 6px 0;\n background: #e5e5e5;\n }\n\n .invoice-items thead tc, .invoice-totals thead tc { text-align: center }\n\n .invoice-items thead th:first-of-type, .invoice-totals thead th:first-of-type { padding-left: 8px }\n\n .invoice-items thead th:last-of-type, .invoice-totals thead th:last-of-type {\n text-align: right;\n padding-right: 8px;\n }\n\n .invoice-items tbody tr th, .invoice-totals tbody tr th { padding-left: 8px }\n\n .invoice-items tbody tr td:last-of-type, .invoice-totals tbody tr td:last-of-type {\n text-align: right;\n padding-right: 8px;\n }\n\n .invoice-items tbody tr:nth-of-type(even) th, .invoice-totals tbody tr:nth-of-type(even) th, .invoice-items tbody tr:nth-of-type(even) td, .invoice-totals tbody tr:nth-of-type(even) td { background: #eee }\n\n .invoice-items tbody th, .invoice-totals tbody th, .invoice-items tbody td, .invoice-totals tbody td {\n padding-top: 6px;\n padding-bottom: 6px;\n background: #fff;\n }\n\n .invoice-items tbody td, .invoice-totals tbody td { text-align: center }\n\n .invoice-items tfoot td, .invoice-totals tfoot td {\n text-align: right;\n font-size: 11px;\n font-weight: bold;\n background: #e5e5e5;\n padding: 6px 8px;\n }\n\n .invoice-pay { padding-top: 30px }\n\n .invoice-pay li {\n overflow: hidden;\n padding-top: 12px;\n }\n\n .invoice-pay li:nth-of-type(even) { padding-top: 18px }\n\n .paid .invoice-pay ul li { display: none }\n\n .paid .invoice-pay ul:after {\n display: block;\n font-weight: bold;\n color: #fff;\n padding: 8px;\n background: green;\n background: rgba(122, 185, 0, 0.7);\n content: \"Paid in Full\";\n text-align: right;\n }\n\n .invoice-notes {\n text-align: left;\n padding-bottom: 30px;\n }\n\n .invoice-notes p, .invoice-notes ul, .invoice-notes ol, .invoice-notes dl { padding-bottom: 1em }\n\n .invoice-notes ul li { list-style: inside disc }\n\n .invoice-notes ol li { list-style: inside decimal }\n\n #footer {\n border-top: 1px solid #dddddd;\n font-size: 11px;\n font-weight: bold;\n }\n\n \u003c/style\u003e\n\n\n \u003cdiv id=\"invoice\" class=\"paid\"\u003e\n\t\t\tTest js report\n\n\n \u003c/div\u003e\u003c!-- e: invoice --\u003e\n \u003c/body\u003e\n\u003c/html\u003e","helpers":"function getSubTotal(data) {\n var result = 0;\n data.items.forEach(function (i) { result += i.price * i.quantity; });\n\n return result;\n}\n\nfunction getTotal(data) {\n var result = 0;\n data.items.forEach(function (i) { result += i.price * i.quantity; });\n\n return result * 0.95;\n}\n\nfunction getTaxes(data) {\n var result = 0;\n data.items.forEach(function (i) { result += i.price * i.quantity; });\n\n return result * 0.05;\n}","recipe":"phantom-pdf","engine":"jsrender"}
-
payload = the data that you are sending to jsreport
you're passing your data in a wrong format to jsreport, the correct format is like the following (options inside the
templatekey):{ "template": { "content": "<html>\n <head>\t\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n </head>\n <body>\n <style>\n .clip {\n -webkit-background-clip: padding-box;\n -moz-background-clip: padding;\n -o-background-clip: padding;\n background-clip: padding-box;\n }\n\n .clear {\n /* for use on: after */\n ;\n content: \" \";\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n }\n\n body {\n font-size: 14px;\n margin: 0px;\n text-align: center;\n background: #ddd;\n color: #333;\n font-family: Helvetica, Arial, sans-serif;\n padding: 40px 0;\n line-height: 1.5em;\n }\n\n a {\n color: #333;\n text-decoration: underline;\n }\n\n strong { font-weight: bold }\n\n em { font-style: italic }\n\n h1 {\n font-size: 28px;\n font-weight: bold;\n padding: 20px 0 0px;\n }\n\n h2, h3, h4, h5, h6, .title {\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 4px;\n margin-bottom: 4px;\n border-bottom: 1px solid #dddddd;\n }\n\n #invoice {\n position: relative;\n padding: 18px;\n max-width: 840px;\n margin: auto;\n background: #f5f5f5;\n border: 10px solid #fff;\n -webkit-box-shadow: 0 0 1px #888888;\n -moz-box-shadow: 0 0 1px #888888;\n -o-box-shadow: 0 0 1px #888888;\n box-shadow: 0 0 1px #888888;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n #invoice.unpaid:before, #invoice.paid:before {\n position: absolute;\n top: -20px;\n right: 0;\n left: 0;\n height: 10px;\n background: red;\n background: rgba(187, 0, 0, 0.8);\n content: \"\";\n }\n\n #invoice.paid:before {\n background: green;\n background: rgba(122, 185, 0, 0.7);\n }\n\n .this-is {\n padding: 8px 0;\n font-size: 16px;\n font-weight: bold;\n border-top: 1px solid #dddddd;\n border-bottom: 1px solid #dddddd;\n }\n\n #header { padding-bottom: 20px }\n\n .invoice-intro p {\n font-size: 12px;\n font-style: italic;\n line-height: 1.5em;\n padding-bottom: 20px;\n }\n\n .invoice-meta {\n position: relative;\n overflow: hidden;\n text-align: right;\n line-height: 1.5em;\n }\n\n .invoice-meta dt {\n float: left;\n width: 46%;\n clear: both;\n font-weight: bold;\n }\n\n .invoice-meta dd {\n width: 46%;\n float: right;\n text-align: left;\n }\n\n #parties {\n position: relative;\n overflow: hidden;\n }\n\n .invoice-to, .invoice-from, .invoice-status {\n text-align: left;\n padding-bottom: 30px;\n }\n\n .paid .invoice-status strong {\n background: green;\n background: rgba(122, 185, 0, 0.7);\n }\n\n .invoice-items, .invoice-totals {\n text-align: left;\n padding-bottom: 30px;\n }\n\n .invoice-items table, .invoice-totals table {\n width: 100%;\n font-size: 12px;\n }\n\n .invoice-items caption, .invoice-totals caption {\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 4px;\n margin-bottom: 4px;\n border-bottom: 1px solid #dddddd;\n text-align: left;\n }\n\n .invoice-items thead th, .invoice-totals thead th {\n font-weight: bold;\n padding: 6px 0;\n background: #e5e5e5;\n }\n\n .invoice-items thead tc, .invoice-totals thead tc { text-align: center }\n\n .invoice-items thead th:first-of-type, .invoice-totals thead th:first-of-type { padding-left: 8px }\n\n .invoice-items thead th:last-of-type, .invoice-totals thead th:last-of-type {\n text-align: right;\n padding-right: 8px;\n }\n\n .invoice-items tbody tr th, .invoice-totals tbody tr th { padding-left: 8px }\n\n .invoice-items tbody tr td:last-of-type, .invoice-totals tbody tr td:last-of-type {\n text-align: right;\n padding-right: 8px;\n }\n\n .invoice-items tbody tr:nth-of-type(even) th, .invoice-totals tbody tr:nth-of-type(even) th, .invoice-items tbody tr:nth-of-type(even) td, .invoice-totals tbody tr:nth-of-type(even) td { background: #eee }\n\n .invoice-items tbody th, .invoice-totals tbody th, .invoice-items tbody td, .invoice-totals tbody td {\n padding-top: 6px;\n padding-bottom: 6px;\n background: #fff;\n }\n\n .invoice-items tbody td, .invoice-totals tbody td { text-align: center }\n\n .invoice-items tfoot td, .invoice-totals tfoot td {\n text-align: right;\n font-size: 11px;\n font-weight: bold;\n background: #e5e5e5;\n padding: 6px 8px;\n }\n\n .invoice-pay { padding-top: 30px }\n\n .invoice-pay li {\n overflow: hidden;\n padding-top: 12px;\n }\n\n .invoice-pay li:nth-of-type(even) { padding-top: 18px }\n\n .paid .invoice-pay ul li { display: none }\n\n .paid .invoice-pay ul:after {\n display: block;\n font-weight: bold;\n color: #fff;\n padding: 8px;\n background: green;\n background: rgba(122, 185, 0, 0.7);\n content: \"Paid in Full\";\n text-align: right;\n }\n\n .invoice-notes {\n text-align: left;\n padding-bottom: 30px;\n }\n\n .invoice-notes p, .invoice-notes ul, .invoice-notes ol, .invoice-notes dl { padding-bottom: 1em }\n\n .invoice-notes ul li { list-style: inside disc }\n\n .invoice-notes ol li { list-style: inside decimal }\n\n #footer {\n border-top: 1px solid #dddddd;\n font-size: 11px;\n font-weight: bold;\n }\n\n </style>\n\n\n <div id=\"invoice\" class=\"paid\">\n\t\t\tTest js report\n\n\n </div><!-- e: invoice -->\n </body>\n</html>", "helpers": "function getSubTotal(data) {\n var result = 0;\n data.items.forEach(function (i) { result += i.price * i.quantity; });\n\n return result;\n}\n\nfunction getTotal(data) {\n var result = 0;\n data.items.forEach(function (i) { result += i.price * i.quantity; });\n\n return result * 0.95;\n}\n\nfunction getTaxes(data) {\n var result = 0;\n data.items.forEach(function (i) { result += i.price * i.quantity; });\n\n return result * 0.05;\n}", "recipe": "phantom-pdf", "engine": "jsrender" }, /*if you need to pass some data for your template, put it here inside the `data` object*/ "data": {} }
-
Thank you. Its working now.
