@admin I think I get it now. I am able to recreate what my client was expecting with the following code. It needed a body property with the data and a headers property with a permanent-link property. Thanks
const body = await response.text();
const permanentLink = await response.headers.get('permanent-link');
return {data:{body,headers:{'permanent-link':permanentLink}}};
I am upgrading my app and going to use the built in http client 'fetch'. I have been using the request library that is now deprecated. I am having an issue with what 'fetch' returns from JsReport. I am getting a string so when 'response.json()''' is called I get error 'Unexpected token '%', "%PDF-1.6\n%"... is not valid JSON'. When I call the same url with 'request' I get an object. It seems like 'fetch' only returns the content of the body property. Is anyone having a similar issue?
request code:
const promise = new Promise<any>((resolve, reject) => {
const options = {
json: data,
uri: 'http://jsreport.innovationind.com/api/report'
};
post(options, (err, result) => {
if (err) {
return reject(err);
}
resolve(result);
});
});
return promise;
fetch code:
try {
const response = await fetch('http://jsreport.innovationind.com/api/report', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify(data)
});
if (response.ok && response.body) {
const body = await response.json(); //error occurs here
return body;
} else {
throw new Error('Failed to fetch the report');
}
} catch (error: any) {
logger.error(error);
return Promise.resolve(error);
}
@admin thanks for pointing that out. I had to prefix the data with @root because I was inside an iteration.
@admin I actually have another scenario. In the watermark template I need to be able to access the data passed into the parent template. Is that possible?
I am using this post as a reference. I have a pdf that has 3 pages. I only want to merge a watermark on the second one. Is this possible with pdfUtils?
const jsreport = require('jsreport-proxy')
async function afterRender(req, res) {
const watermarkRes = await jsreport.render({
template: {
name: 'Watermark'
}
})
const $pdf = await jsreport.pdfUtils.parse(res.content)
const pagesToMerge = new Array($pdf.pages.length).fill(watermarkRes.content)
const originalBuffer = Buffer.from(res.content)
const withWatermarkBuffer = await jsreport.pdfUtils.merge(originalBuffer, pagesToMerge)
res.content = await jsreport.pdfUtils.append(res.content, withWatermarkBuffer)
}
I found a solution. See the playground above and the "multiple-highcharts-fix" template.
The chart renders but only the last chart in the array is displayed. Not sure how to use a page-break in this situation.
Here it is in the playground.
Template:
<style>
html,
body {
height: 100%;
width: 100%;
}
.page-break { display: block; page-break-before: always; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.highcharts.com/8.0.4/highcharts.js"></script>
<script src="http://code.highcharts.com/8.0.4/highcharts-3d.js"></script>
<div id="container" >
<div id="chart" style="width:1024px;height:768px"></div>
</div>
<script>
$(function () {
var data = {{{toJSON this}}}
data.charts.forEach(function(data) {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'column',
},
colors: ['#7cb5ec'],
title: {
text: data.teamMember +'('+ data.dateRange +')',
style: {
fontSize: '40px'
}
},
subtitle: {
text: 'Operations Scanned',
style: {
fontSize: '20px'
}
},
legend: {
enabled: false
},
xAxis: {
categories: data.categories,
crosshair: true,
labels: {
rotation: -60,
style: {
color: 'black',
fontSize: '16px',
// fontSize: 11px
}
},
},
yAxis: {
min: 0,
tickInterval: 10,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontSize: '16px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
},
plotOptions: {
series: {
animation: false,
},
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter:function() {
if(this.y != 0) {
return this.y;
}
}
},
pointPadding: 0.2,
borderWidth: 0
}
},
series: data.series
});
})
});
</script>
Data:
{
"charts": [
{
"series": [
{
"data": [
29,
20,
19,
9,
27,
67
]
}
],
"categories": [
"12/06/17",
"12/07/17",
"12/08/17",
"12/11/17",
"12/12/17",
"12/13/17"
],
"teamMember": "Jane D.",
"dateRange": "12/06/17-12/13/17"
},
{
"series": [
{
"data": [
30,
19,
20,
11,
25,
99
]
}
],
"categories": [
"12/06/17",
"12/07/17",
"12/08/17",
"12/11/17",
"12/12/17",
"12/13/17"
],
"teamMember": "John D.",
"dateRange": "12/06/18-12/13/18"
}
]
}