i am trying to install jsrepot server on multiple PCs here
and using your instructions like this :
npm install @jsreport/jsreport-cli -g
jsreport init
jsreport configure
jsreport start
whenever I try to run the samples I get this error
"chrome pdf generation time out "
the versions are :
jsreport version: 4.5.0
cli version: 4.0.4
??
in my other PCs where I have old versions its working ??
i found the solution and the solution is to set the data inside a dictionary
<script>
SubjectData=[]
{{#each table1}}
{{#each this.Classes}}
SubjectData['subjects_{{../Level}}_{{this.Class}}'] = {{{toJS Subjects}}};
Highcharts.setOptions({ plotOptions: { series: { animation: false } } });
Highcharts.chart('container-chart-{{../Level}}-{{this.Class}}', {
credits: { enabled: false },
chart: { backgroundColor: 'transparent' },
title: { text: '', align: 'right' },
xAxis: { categories: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Subject), labels: { overflow: 'justify', style: { fontSize: '10px' }, rotation: -65 }},
yAxis: {title: { text: 'الدرجات' },opposite: true},
tooltip: { valueSuffix: ' million liters' },
plotOptions: { series: { borderRadius: '25%',dataLabels: { enabled: true }}},
series: [
{ type: 'column', name: 'اقل درجة', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => parseInt(subject.MinTotal, 10)) },
{ type: 'column', name: 'المتوسط', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => parseInt(subject.MeanTotal, 10)) },
{ type: 'column', name: 'اعلى درجة', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => parseInt(subject.MaxTotal, 10)) }
]
});
Highcharts.chart('highcharts-chart-{{../Level}}-{{this.Class}}', {
credits: { enabled: false },
chart: { backgroundColor: 'transparent', type: 'column' },
title: { text: '' },
xAxis: { categories: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Subject), labels: { style: { fontSize: '10px' }, rotation: -65 } },
yAxis: { allowDecimals: false, min: 0, title: { text: 'عدد الطلاب' }, opposite: true },
tooltip: { format: '<b>{key}</b><br/>{series.name}: {y}<br/>' + 'Total: {point.stackTotal}' },
plotOptions: { column: { stacking: 'normal' } },
series: [
{ name: 'ممتاز', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Excellent_count), stack: 'order' },
{ name: 'جيد جدا', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Very_Good_count), stack: 'order' },
{ name: 'جيد', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Good_count), stack: 'order' },
{ name: 'مقبول', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Pass_count), stack: 'order' },
{ name: 'ضعيف', data: SubjectData['subjects_{{../Level}}_{{this.Class}}'].map(subject => subject.Weak_count), stack: 'order' }
]
});
{{/each}}
{{/each}}
</script>
i am using this code to generate charts dynamically
<script>
{{#each table1}}
{{#each this.Classes}}
Console.log('Script is executing.');
const subjects_{{../Level}}_{{this.Class}} = {{{toJS Subjects}}};
Highcharts.chart('container-chart-{{../Level}}-{{this.Class}}', {
credits: { enabled: false },
chart: { backgroundColor: 'transparent' },
title: { text: '' },
xAxis: { categories: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Subject), labels: { overflow: 'justify', style: { fontSize: '10px' }, rotation: -65 } },
yAxis: { title: { text: 'الدرجات' }, opposite: true },
tooltip: { valueSuffix: ' million liters' },
plotOptions: { series: { borderRadius: '25%', dataLabels: { enabled: true } } },
series: [
{ type: 'column', name: 'اقل درجة', data: subjects_{{../Level}}_{{this.Class}}.map(subject => parseInt(subject.MinTotal, 10)) },
{ type: 'column', name: 'المتوسط', data: subjects_{{../Level}}_{{this.Class}}.map(subject => parseInt(subject.MeanTotal, 10)) },
{ type: 'column', name: 'اعلى درجة', data: subjects_{{../Level}}_{{this.Class}}.map(subject => parseInt(subject.MaxTotal, 10)) }
]
});
// Chart for Grade Distribution
Highcharts.chart('highcharts-chart-{{../Level}}-{{this.Class}}', {
credits: { enabled: false },
chart: { backgroundColor: 'transparent', type: 'column' },
title: { text: '' },
xAxis: { categories: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Subject), labels: { style: { fontSize: '10px' }, rotation: -65 } },
yAxis: { allowDecimals: false, min: 0, title: { text: 'عدد الطلاب' }, opposite: true },
tooltip: { format: '<b>{key}</b><br/>{series.name}: {y}<br/>' + 'Total: {point.stackTotal}' },
plotOptions: { column: { stacking: 'normal' } },
series: [
{ name: 'ممتاز', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Excellent_count), stack: 'order' },
{ name: 'جيد جدا', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Very_Good_count), stack: 'order' },
{ name: 'جيد', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Good_count), stack: 'order' },
{ name: 'مقبول', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Pass_count), stack: 'order' },
{ name: 'ضعيف', data: subjects_{{../Level}}_{{this.Class}}.map(subject => subject.Weak_count), stack: 'order' }
]
});
{{/each}}
{{/each}}
</script>
but I see nothing the code works for specific data but not dynamic
this is the playground link everything is there : https://playground.jsreport.net/w/mo3enpro/GhHZP6fH
the same script code is done in the template and is working there and data is shown , does jsreport support dynamic script ??? or maybe its done any other way???
@admin
1- the margin in the top and bottom I can't remove them there is a margin I am trying to remove I tried all possible
techniques not working, as you can see here for the file certificates.
2-when data contains 200 student I get error not able to render data how can I fix that , you can see this issue in file certificate200 in same playground.
this is the playground link: https://playground.jsreport.net/w/mo3enpro/Kiaj68ZR
I use jsreport from WPF C# desktop app
I know that I am asking a lot but I truly like jsreport I think it's awesome, and you are my only resource.
thanks a million, i thought I tried all the syntax "Possibilities" , yet your line works like charm, thank you.
@admin here is the playground:
https://playground.jsreport.net/w/anon/CrDOBJnV
the file main is using the image path like : url(' {{asset "./image6.jpg""dataURI"}} ') and its working
what I wanna do is to set the path through the data
as I am trying in main1
i also tried to get the full path into template through this line of code
template= Path.Combine(Directory.GetCurrentDirectory(),"icons" ,SelectedImageName.Replace("/icons/", ""));
the problem is in this line
<div class="container" style="background-image: url('{{../commonInfo.template}}'); background-size: cover;">
i am trying to set the report background image through a string I pass to report but its not working I can set the image one time like this
<div class="container" style="background-image: url(' {{asset "./image6.jpg""dataURI"}} '); background-size: cover;">
what I wanna do is set the URL as user select an image
so I am trying this code which is not working
<body>
{{#each students}}
<div class="container" style="background-image: url('{{../commonInfo.template}}'); background-size: cover;">
<table style="vertical-align: top; text-align: center;" height="70%" width="100%">
<tr>
<td style="vertical-align: top; text-align: center;" height="20%" width="100%">
<br><br><br><br><br><br>{{../commonInfo.certificatetype}}
</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;" height="20%" width="100%">{{StudentNameAr}}</td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;" height="30%" width="100%">
{{../commonInfo.certificatetext}}
</td>
</tr>
</table>
<table style="vertical-align: top; text-align: center;" height="30%" width="100%">
<tr>
<td style="vertical-align: top; text-align: center;" width="50%">
{{../commonInfo.teachermajor}}: <br>{{../commonInfo.teachername}}
</td>
<td style="vertical-align: top; text-align: center;" width="50%">
مدير المرسة: <br>{{../commonInfo.managername}}
</td>
</tr>
</table>
</div>
{{/each}}
</body>
could u please help.
in my code i have headerfooter.html
like this:
<body>
{{#each $pdf.pages}}
{{#if 10}}
<div style="page-break-before: always;"></div>
{{/if}}
<main class="main">
<header class="header">
</header>
<footer class="footer">
<span>Page {{getPageNumber 10}} of {{getTotalPages ../$pdf.pages}}</span>
</footer>
</main>
{{/each}}
</body>
but the report is showing page 1 of 4 in all pages ??
this is the code I use to render the report:
var report = await rs.RenderAsync(new RenderRequest
{
Template = new Template
{
Content = File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", _report.ReportTemplate)),
Engine = Engine.Handlebars, // You can specify the template engine if needed
Recipe = Recipe.ChromePdf,
Chrome = new Chrome()
{
MarginBottom = "2cm",
MarginTop = "1cm",
MarginLeft = "1cm",
MarginRight = "1cm"
},
PdfOperations = new List<PdfOperation>() {
new PdfOperation{
MergeWholeDocument = false,
Type=PdfOperationType.Merge,
Template=new Template{
Helpers=File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", "helper.js")),
Content = File.ReadAllText(Path.Combine(path.LocalPath, "ReportTemplates", "Header-Footer.html")),
Engine = Engine.Handlebars,
Recipe = Recipe.ChromePdf,
}
}
}
},
Data = _report.Content,
});
and this is the content HTML code:
<div style='page-break-before: always;'></div>
<div class="container">
<table class="centered-table ">
<tr class="extr-spacing-er">
<td style="text-align: center; vertical-align: top;" width="33%">
<img src="{{asset "./kingdom_ fo saudi_arabia.png""dataURI"}}" width="210" height="53" /><br>
<strong>وزارة التعليم</strong><br>
{{Schooldetail.SchoolNameAr}}
</td>
<td style="text-align: center; vertical-align: top;" width="33%">
<img src="{{asset "./minstry_of_education.png""dataURI"}}" width="100" height="100" />
</td>
<td style="text-align: left; vertical-align: top;" width="33%">
التاريخ: <span id="currentDate"></span>
<script>
// JavaScript to display the current system date
var currentDateElement = document.getElementById("currentDate");
var currentDate = new Date();
currentDateElement.textContent = currentDate.toLocaleDateString();
</script>
</td>
</tr>
</table>
</div>
helper js i tried different codes but the same output page index is not changed for every page.