Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Javascript is not working #51

Open
dineshguntha opened this issue Sep 9, 2018 · 5 comments
Open

Javascript is not working #51

dineshguntha opened this issue Sep 9, 2018 · 5 comments

Comments

@dineshguntha
Copy link

With the below code javascript is not enable? could pleae advice on it?
sb.AppendFormat(@"


<style>
.header {
text-align: center;
color: green;
padding-bottom: 35px;
}

                            table {
                                width: 80%;
                                border-collapse: collapse;
                            }

                            td, th {
                                border: 1px solid gray;
                                padding: 15px;
                                font-size: 22px;
                                text-align: center;
                            }

                            table th {
                                background-color: green;
                                color: white;
                            }
                                            </style>            
                                <script src='{0}\\js\\Chart.js'></script>                               
                        </head>

                        <body>
                            <div class='header'><h1>This is the generated PDF report!!!</h1></div>
                            <table align='center'>
                                <tr>
                                    <th>Name</th>
                                    <th>LastName</th>
                                    <th>Age</th>
                                    <th>Gender</th>
                                </tr>", webpath);

        foreach (var emp in employees)
        {
            sb.AppendFormat(@"<tr>
                                <td>{0}</td>
                                <td>{1}</td>
                                <td>{2}</td>
                                <td>{3}</td>
                              </tr>", emp.Name, emp.LastName, emp.Age, emp.Gender);
        }

        sb.Append(@"
                            </table>
                            <canvas id='myChart'></canvas>
                             <script>
                            var ctx = document.getElementById('myChart').getContext('2d');
                            var chart = new Chart(ctx, {
                                // The type of chart we want to create
                                type: 'line',

                                // The data for our dataset
                                data: {
                                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                                    datasets: [{
                                            label: 'My First dataset',
                                        backgroundColor: 'rgb(255, 99, 132)',
                                        borderColor: 'rgb(255, 99, 132)',
                                        data: [0, 10, 5, 2, 20, 30, 45],
                                    }]
                                },

                                // Configuration options go here
                                options: {}
                            });
                            </script>
                        </body>
                    </html>");
@ArDotWeb
Copy link

ArDotWeb commented Apr 1, 2019

I have the same problem

@PiotrFirst
Copy link

This post is little old, but Is there solution for rendering jsChart with DinkToPdf?

@MostafaRamadan1
Copy link

Any updates!

@PiotrFirst
Copy link

I render page in browser and send rendered HTML to controller for generating PDF.
To render js chart I wrote simple workaround which work, but the resolution of the chart is not in high quality (in PDF looks enough). The main things is to render chart in canvas after page loading. And the second is to hide div with canvas and copy picture to image component by url_base64 encoding. Please try this example.

HTML part:

<image id = 'abcUrl />
<div id = 'abc' style = 'width: 800px; height: 400px;'>
    <canvas id = 'abcChart' width = '800' height = '400'> </canvas>
</div>

and JS part after rendering page:

var url_base64jp = document.getElementById ("abcChart"). toDataURL ('image/png', 1.0);
console.log ("img:", url_base64jp);
document.getElementById ('abcUrl").src = url_base64jp;
$ ("#abc"). attr ("hidden", true);

@csharpforevermore
Copy link

csharpforevermore commented Sep 11, 2020 •
edited

This doesn't fix it for me. I get an empty image rendered.

var url_base64jp = document.getElementById("abcChart").toDataURL('image/png', 1.0); console.log("img:", url_base64jp); document.getElementById("abcUrl").src = url_base64jp; $("#abc").attr("hidden", true);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@csharpforevermore @ArDotWeb @dineshguntha @PiotrFirst @MostafaRamadan1