chart.js not rendering as pdf



  • 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?



  • 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



  • 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?



  • 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 });
    


  • 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>    
    


  • 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



  • 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.



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


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.