paged.js works on web version but not when printed with wkhtmltopdf

Question

We use wkhtmltopdf (aka 'wk', in this question) to generate pdf documents from web pages. Version number is wkhtmltopdf 0.12.6 (with patched qt)

It's a good workflow normally because you can carry on working on the web version till you're happy with it, in the usual way, and then just pass the url of that page to wkhtmltopdf to generate the pdf version.

We're now trying to add page numbering, using https://github.com/pagedjs/pagedjs - the polyfill version.

The page numbering appears on the web page version, but I can't get it to come through in the pdf that wk makes. In fact none of the paged.js stuff seems to happen in the wk version - it does large margins too by default which are easy to spot. (ultimately we don't actually want the page numbering or any paged.js stuff on the web version, i've just got it turned on while i try to solve this wk problem.

I've got a static web page that i'm using to try to crack this, which looks like this:

<html>
  <head>
    <title>TEST PAGE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script src="https://unpkg.com/pagedjs@0.4.1/dist/paged.polyfill.js"></script>
    <style media="print">
      @page {
        @bottom-left {
          content: 'page ' counter(page);
        }
      }
    </style>
  </head>
  <body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eros nec quam euismod tempus. Mauris sem diam, vulputate interdum sollic

    ...... lots of p tags full of lorem

    congue turpis eu augue auctor, vitae convallis ante consectetur. Mauris vestibulum non arcu vitae laoreet.
  </p>
  </body>
</html>

Using the --debug-javascript option, i get this output:

$ /usr/local/bin/wkhtmltopdf --debug-javascript --page-size "Letter" "https://local.example.com/page_test.html" "/tmp/page_test.pdf"
Loading pages (1/6)
Warning: https://unpkg.com/pagedjs@0.4.1/dist/paged.polyfill.js:337 SyntaxError: Parse error
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done

If I look up the line the warning refers to, https://unpkg.com/pagedjs@0.4.1/dist/paged.polyfill.js:337, it's the class Hook line below:

     * Functions may return a promise if they are asycn.
     * From epubjs/src/utils/hooks
     * @param {any} context scope of this
     * @example this.content = new Hook(this);
     */
    class Hook { 
        constructor(context){
            this.context = context || this;
            this.hooks = [];
        }

I've got a local copy of paged.polyfill.js, and in that I tried changing that javascript line to

    const Hook = class {
 ```

but get the same error.

My javascript knowledge is pretty basic, can anyone see why it might be complaining about that?  Or have any other ideas?  thanks

paged.js works on web version but not when printed with wkhtmltopdf

0 Answers0