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

Getting SyntaxError: Parse error when trying to convert in pdf by wkhtmltopdf. #9381

Closed
pitocms opened this issue Jul 9, 2021 · 4 comments
Closed

Getting SyntaxError: Parse error when trying to convert in pdf by wkhtmltopdf. #9381

pitocms opened this issue Jul 9, 2021 · 4 comments
Labels
type: support

Comments

@pitocms
Copy link

pitocms commented Jul 9, 2021

**wkhtmltopdf version **: 0.12.6

Description
Chart js html to pdf getting error

Warning: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js:7 SyntaxError: Parse error
Warning: http://localhost/pdf_test/index.html:39 SyntaxError: Parse error

How to reproduce
HTML I have used

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
</head>
<body>

<div class="reportGraph" width="300" height="250"  style="width: 400px;height: 400px;">
    <canvas width="300" height="250" id="myChart"></canvas>
</div>

<script type="text/javascript">

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

const config = {
  type: 'bar',
  data,
  options: {
     animation: false,
        scales: {
            x: {
                grid: {
                tickColor: 'red'
                },
                ticks: {
                color: 'blue',
                }
            }
        }
  }
};

var myChart = new Chart(
    document.getElementById('myChart').getContext('2d'),
    config
);

</script>
</body>
</html>

Html output :

image

**Console errorr **
command :
wkhtmltopdf --enable-javascript --javascript-delay 10000 --no-stop-slow-scripts --debug-javascript http://localhost/pdf_test/test.html testpdf101

Loading pages (1/6)
Warning: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js:7 SyntaxError: Parse error
Warning: http://localhost/pdf_test/index.html:39 SyntaxError: Parse error
Counting pages (2/6)                                               
Resolving links (4/6)                                                       
Loading headers and footers (5/6)                                           
Printing pages (6/6)
Done

PDF OUTPUT
Blank , no any chart has displayed.
@etimberg
Copy link
Member

etimberg commented Jul 9, 2021

This seems like an issue where wkhtmltopdf does not support the version of JavaScript that we're transpiling to. If you use the un-minified version, do you know what line it errors on?

@pitocms
Copy link
Author

pitocms commented Jul 9, 2021 •
edited

This seems like an issue where wkhtmltopdf does not support the version of JavaScript that we're transpiling to. If you use the un-minified version, do you know what line it errors on?

This the function in un-minified version line 16
Warning: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js:16 SyntaxError: Parse error

const requestAnimFrame = (function() {
  if (typeof window === 'undefined') {
    return function(callback) {
      return callback();
    };
  }
  return window.requestAnimationFrame;
}());

@etimberg
Copy link
Member

etimberg commented Jul 9, 2021

It sounds like it doesn't like const. I think you might need to compile chart.js yourself to ES5 per wkhtmltopdf/wkhtmltopdf#3596

In the codebase, you'd need to change the rollup config to include something like babel

@pitocms pitocms closed this as completed Jul 10, 2021
@JamoCA JamoCA mentioned this issue Nov 24, 2021
Closed
@PIoneer2
Copy link

WKHTMLTOPDF correctly prints a row number with the --debug-javascript flag. But has no detail on "what failed to parse".
let also generates the same error message.

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

No branches or pull requests
3 participants
@pitocms @etimberg @PIoneer2