jsreport forum

Aparna Bathula

can i render table conditional based color changed like this using jsreports

Aparna Bathula

Aparna Bathula

Here is the fiddle. Can You please check it once https://jsfiddle.net/xqf2og8s/1/

Aparna Bathula

I am able to render static data in charts but i am unable to render dynamic data in my handlebars.

Aparna Bathula

i tried it but it's not help full for me

Aparna Bathula

i want to pass data to this object

var ctx = document.getElementById('barchart').getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',

    data: {
        labels:DashboardData.barcharResponse.dates,
        datasets: [{
            label: 'Customers',
            data:DashboardData.barcharResponse.values,
            backgroundColor:'blue'
        }]
    },
    options: {

        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        },title: {
            display: true,
            text: 'Day Wise Stastics'
        },
        animation: {
            onComplete: function () {
                // set the PDF printing trigger when the animation is done
                // to have this working, the phantom-pdf menu in the left must
                // have the wait for printing trigger option selected
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

Aparna Bathula

i created handelbars file there i wrote my canvas and chart json but i didn't get data to the charts

jsreport.render({
template: {
content: fs.readFileSync('./report.handlebars').toString('utf8'),
helpers: 'function toJSON() { return 1 }',
engine: 'handlebars',
recipe: 'phantom-pdf',

                 phantom: {
                     header: '<div style="float:right">Page {#pageNum} of {#numPages}</div>',
                     footer: "Rent Dues Report",
                     format: 'A4',
                     orientation: 'portrait',
                     footerHeight: '0.7cm',
                     headerHeight: '0.7cm',
                     margin: '0.5cm',
                     waitForJS: true
                 }
             },
             data: {
                 DashboardData: data,
                 startDate: startDate,
                 endDate: endDate,
                 dummydata: dummydata

             }
         })

Aparna Bathula

i got data my script but it will not append to chart object

but console.log i got data like this "[object HTMLDivElement]" and i declared div element in my html top

Aparna Bathula

this is my code i am trying to render dynamic data into charts
<canvas id='barchart'></canvas>
<script>
function toJSON(DashboardData) {
return JSON.stringify(DashboardData);
}
console.log("zxgvgdfg"+toJSON)
var ctx = document.getElementById('barchart').getContext('2d');
var barchart = new Chart(ctx, {
type: 'bar',

    data: {
        labels:{{toJSON.barcharResponse.dates}},
        datasets: [{
            label: 'Customers',
            data: {{toJSON.barcharResponse.values}},
            backgroundColor:'blue'
        }]
    },
    options: {

        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        },title: {
            display: true,
            text: 'Day Wise Stastics'
        },
        animation: {
            onComplete: function () {
                // set the PDF printing trigger when the animation is done
                // to have this working, the phantom-pdf menu in the left must
                // have the wait for printing trigger option selected
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

</script>

Aparna Bathula

https://playground.jsreport.net/studio/workspace/SkcQLLOGl/575

how can i true "wait for printing trigger:true"

in my nodejs

jsreport.render({
        template: {
            content: fs.readFileSync('./emailtemplate.html').toString('utf8'),
            engine: 'handlebars',
            recipe: 'phantom-pdf',

            phantom: {
                header: '<div style="float:right">Page {#pageNum} of {#numPages}</div>',
                footer: "Rent Dues Report",
                format: 'A4',
                orientation: 'portrait',
                footerHeight: '0.7cm',
                headerHeight: '0.7cm',
                margin: '0.5cm',
                waitforprintingtrigger:true
            }
        },

Aparna Bathula

hi.. try this way i stored my pdf file in my directory by using nodejs using fileSystem 'fs'

jsreport.render({
template: {
content:'<h1>hi {{:foo}}</h1>',
engine: 'jsrender',
recipe: 'phantom-pdf'
},
data: {foo:welcome}

})
    .then(function (res) {
    var read = fs.createWriteStream('files/reports' + 'report.pdf');
    res.stream.pipe(read);
});

Aparna Bathula

router.get('/:jsreport', function (req, res, next) {
jsreport.render({
template: {
content: '<h1>Hello</h1>',
engine: 'jsrender',
recipe: 'phantom-pdf'
},
options: {
"preview": true
},
data: {
foo: "world"
}
}).then(function(resp) {
res.json({
success:true,
data:resp,
message:"leases"
})
// write report buffer to a file
// fs.writeFileSync('report.pdf', resp.content)
});
});
resp was converted into my front end code like this :
$scope.printfn=function(){
bookingService.get({jsreport:"jsreport"},function (response) {
var myBlobObject=new Blob([response.data.content.data],{ type:'application/pdf'});
var name = 'notes.pdf';
var url = window.URL || window.webkitURL
var fileURL = url.createObjectURL(myBlobObject);
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',fileURL);
downloadLink.attr('download',name);
downloadLink.attr('target','_self');
downloadLink[0].click();//call click functiona
url.revokeObjectURL(fileURL);//revoke the object from URL
})
}
and my response is:
data
:
{headers: {Content-Type: "application/pdf", Content-Disposition: "inline; filename="report.pdf"",…},…}
content
:
{type: "Buffer",…}
data
:
[37, 80, 68, 70, 45, 49, 46, 52, 10, 49, 32, 48, 32, 111, 98, 106, 10, 60, 60, 10, 47, 84, 105, 116,…]
type
:
"Buffer"

downloaded pdf files shows:

Aparna Bathula

handel bars you can render data like this way also:
<tbody>
{{#each sortArray}}
<tr>
<td class="text-center">{{bedname}}</td>
<td class="text-center">{{firstName}}</td>
<td class="text-center">{{paymentName}}</td>
<td class="text-center">{{categoryName}}</td>
<td class="text-center">{{paymentDates}}</td>
{{#if receiptNumber}}
<td class="text-center">{{receiptNumbers}}</td>
{{else}}
<td class="text-center">{{recieptNull}}</td>
{{/if}}

<td class="text-center">{{paymentAmount}}</td>
<td class="text-center">{{ccNumber}}</td>
<td class="text-center">{{batchNumber}}</td>
<td class="text-center">{{approvalCode}}</td>
{{#if remarks}}
<td class="text-center" style="width: 10px">{{remarkss}}</td>
{{else}}
<td class="text-center" style="width: 10px">{{remarksnull}}</td>
{{/if}}
</tr>
{{/each}}
</tbody>

Aparna Bathula

thank u sooo... for u are supporting

Aparna Bathula

thank u jan_blaha...
i can render pdf file but i want to render data in dynamically in html page but i got an error

Unhandled rejection TypeError: Error during rendering report: string.match is no
t a function
at module.exports (E:\homaso\node_modules\async-replace\async-replace.js:30:

at tryCatcher (E:\homaso\node_modules\jsreport-assets\node_modules\bluebird
js\release\util.js:16:23)
at ret (eval at makeNodePromisifiedEval (E:\homaso\node_modules\jsreport-ass
ets\node_modules\bluebird\js\release\promisify.js:184:12), <anonymous>:13:39)
at evaluateAssets (E:\homaso\node_modules\jsreport-assets\lib\assets.js:66:1
at E:\homaso\node_modules\jsreport-assets\lib\assets.js:267:14
at tryCatcher (E:\homaso\node_modules\listener-collection\node_modules\blueb
ird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (E:\homaso\node_modules\listener-collec
tion\node_modules\bluebird\js\release\promise.js:510:31)
at Promise._settlePromise (E:\homaso\node_modules\listener-collection\node_m
odules\bluebird\js\release\promise.js:567:18)
at Promise.settlePromise0 (E:\homaso\node_modules\listener-collection\node
modules\bluebird\js\release\promise.js:612:10)
at Promise.settlePromises (E:\homaso\node_modules\listener-collection\node
modules\bluebird\js\release\promise.js:691:18)
at Async._drainQueue (E:\homaso\node_modules\listener-collection\node_module
s\bluebird\js\release\async.js:133:16)
at Async._drainQueues (E:\homaso\node_modules\listener-collection\node_modul
es\bluebird\js\release\async.js:143:10)
at Immediate.Async.drainQueues (E:\homaso\node_modules\listener-collection\n
ode_modules\bluebird\js\release\async.js:17:14)
at runCallback (timers.js:672:20)
at tryOnImmediate (timers.js:645:5)
at processImmediate [as _immediateCallback] (timers.js:617:5)

my code:
var html = fs.readFileSync('./test.html')
jsreport.render({
template: {
content:html
engine: 'jsrender',
recipe: 'phantom-pdf'
},
data: {
foo: "world"
}
}).then(function (resp) {
// write report buffer to a file
console.log("*********************" + resp)

                                var read = fs.createWriteStream('report.pdf')
                                resp.stream.pipe(read);
                            });

can i do like this way

Aparna Bathula

here my code:
jsreport.render({
template: {

                                    // content: fs.readFileSync('../test.html'),
                                    content: "Hello world {{#sayLoudly this.name}}",
                                    helpers: "function sayLoudly(str) { return str.toUpperCase(); }",
                                    engine: "jsrender",
                                    // recipe: "html"
                                    recipe: "phantom-pdf",
                                    data: { name: "jsreport" }
                                },

                            }).then(function(out){
                                console.log("*********************************",out)
                                // out.stream.pipe(fs.createWriteStream('../reports.pdf'));
                                var read=fs.createWriteStream('report.pdf')
                                out.stream.pipe(read);
                            });

i got an error like this:
Unhandled rejection Error: Error during rendering report: Data entry not found (
jsreport)
at E:\homaso\node_modules\jsreport-data\lib\data.js:87:15
at tryCatcher (E:\homaso\node_modules\listener-collection\node_modules\blueb
ird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (E:\homaso\node_modules\listener-collec
tion\node_modules\bluebird\js\release\promise.js:510:31)
at Promise._settlePromise (E:\homaso\node_modules\listener-collection\node_m
odules\bluebird\js\release\promise.js:567:18)
at Promise.settlePromise0 (E:\homaso\node_modules\listener-collection\node
modules\bluebird\js\release\promise.js:612:10)
at Promise.settlePromises (E:\homaso\node_modules\listener-collection\node
modules\bluebird\js\release\promise.js:691:18)
at Async._drainQueue (E:\homaso\node_modules\listener-collection\node_module
s\bluebird\js\release\async.js:133:16)
at Async._drainQueues (E:\homaso\node_modules\listener-collection\node_modul
es\bluebird\js\release\async.js:143:10)
at Immediate.Async.drainQueues (E:\homaso\node_modules\listener-collection\n
ode_modules\bluebird\js\release\async.js:17:14)
at runCallback (timers.js:672:20)
at tryOnImmediate (timers.js:645:5)
at processImmediate [as _immediateCallback] (timers.js:617:5)

Aparna Bathula

plz explain jsreport fonts working different my locale code and server code font sizes are increasing in server side

Posts made by Aparna Bathula