chart.js not rendering as pdf

vbmark

I copied and pasted the body of this template https://playground.jsreport.net/studio/workspace/SkcQLLOGl/3 into my asp dotnet mvc web app. I cannot get it to render as pdf. The page it is in uses a shared layout, does that matter?

jan_blaha

Try to check the debug logs, you can find how to get them in the .net sdk introduction video.
Did you set the Template.Phantom.WaitForJS property to true so the printing waits for chart.js to finish rendering?
https://github.com/jsreport/jsreport-dotnet-types/blob/master/jsreport.Types/Request/Phantom.cs#L74

vbmark

I am not using jsreport studio, I just copied the body of that template into my cshtml page. How/where do I set the Template.Phantom.WaitForJS property to true?

jan_blaha

The video explains how to get debug logs out from asp.net.... without using studio...

To configure the rendering request, you should use something like this

HttpContext.JsReportFeature()
        .Recipe(Recipe.PhantomPdf)
        .Configure((r) => r.Template.Phantom = new Phantom() { WaitForJS = true });

vbmark

I added that to the script block and get the following error:

Uncaught SyntaxError: missing ) after argument list

<canvas id='myChart' style="margin-top:30px"></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
            datasets: [{
                label: 'apples',
                data: [12, 19, 3, 17, 6, 3, 7],
                backgroundColor: "rgba(153,255,51,0.4)"
            }, {
                label: 'oranges',
                data: [2, 29, 5, 5, 2, 3, 10],
                backgroundColor: "rgba(255,153,0,0.4)"
            }]
        },
        options: {
            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
                }
            }
          
        }
    });
    HttpContext.JsReportFeature()
        .Recipe(Recipe.PhantomPdf)
        .Configure((r) => r.Template.Phantom = new Phantom() { WaitForJS = true });
</script>

jan_blaha

Oh... HttpContext is more like an asp.net, I thought it is obvious where to put it :)

[EnableJsReport()]
public IActionResult Invoice()
{
    HttpContext.JsReportFeature()
      .Recipe(Recipe.PhantomPdf)
      .Configure((r) => r.Template.Phantom = new Phantom() { WaitForJS = true });
    return View();
}

Please see docs...
https://jsreport.net/learn/dotnet-mvc

vbmark

No, you're right, it was obvious. I've just been deep into client-side code and wasn't thinking.

However, adding the WaitForJS did not change it to pdf, the output in the canvas is still just an image.

jan_blaha

I've tried this and it works for me. Take a look.
https://github.com/pofider/test2