Report Sidebar

[FlowOverFail]

When using the: ".report-sidebar: p [Text-Here]" I am unable to get the sidebar on the second page of the PDF. I used Git to clone the example and worked straight from there.

Any help would be appreciated, thanks!

[Zulko]

I am not sure what your project looks like, but to get a sidebar using .report-sidebar you need the following SCSS. In particular, position: fixed; is the specification that makes it appear on every page.

[FlowOverFail]

@Zulko I cloned from the report example so my .scss file is exactly like the example. The example-generated PDF file contains the sidebar on every page, but using the .pug in atom (along with the relaxed ./report.pug) it generates a PDF with the sidebar on the first page only. Can you take a quick look at using the example provided for report>

[Zulko]

oh i get it. I'll have a look

[FlowOverFail]

@Zulko Thank you very much! Looking forward to writing a report for my research paper for school. Thanks for your time, cheers!

[Zulko]

It works on my machine (and it is really a feature I use even with other frameworks, like in Python, so I believe it is robust). I'm not sure how to troubleshoot this. If you open the ".htm" file produced, in your browser, do you see the side bar as fixed ?

[FlowOverFail]

@Zulko I tried installing this on my Desktop and still have the same results with the .pdf.

As for the .htm page, the sidebar is on the left and doesn't move when scrolling.

I'm using Windows 10 with the latest version of NPM.

If I manually use puppeteer to print the PDF using the commands below, I still get the same result:

`

(async () => {
... const browser = await puppeteer.launch();
... const page = await browser.newPage();
... await page.goto('file:///C:/Users/Desktop/Desktop/Relaxed/Report/_temp.htm', {waitUntil: 'networkidle2'});
... await page.pdf({path: 'hn.pdf', format: 'A4'});
...
... await browser.close();
... })();
Promise {
,
domain:
Domain {
domain: null,
_events: { error: [Function: debugDomainError] },
_eventsCount: 1,
_maxListeners: undefined,
members: [] } }

`

[FlowOverFail]

@Zulko I also just tried installing this on a new Ubuntu Desktop VM with everything updated. Same results are produced for me.

[benperiton]

I have the same issue, and it seems to be related to versions of Puppeteer > 1.0.0
If I change package.json to "puppeteer": "1.0.0" then it works just fine.

Not sure if it's related to puppeteer or the updated chromium version.

[Zulko]

Thanks @benperiton , this is very bad news, I love that sidebar, and the general idea to "watermark" every page with a constant element. My best guess is that there was a change in the way the most recent versions of Chromium print PDFs. That would be sad. For instance Weasyprint (for python) also considers that "position: fixed" elements should appear on every page.

Last resort, I'll freeze pupetteer to 1.0, but I'm not sure if it could clash with other libraries in global installs.

[benperiton]

Having a little play, it seems it is related to

-webkit-transform-origin: 0 0;
transform: rotate(-90deg)

If those are removed, then the 'watermarking' works fine - as in it appears on every page.

[Zulko]

Sounds less desperate than I thought. Thanks for finding that there are rendering differences in the most recent versions of puppeteer, hopefully they can all be fixed by amending the CSS.

[benperiton]

Seems like something changed in Chromium. There's probably a way to fix the rotate transform with some funky css options, but that's not really my strong point so I'll leave that for someone else :) In the meantime, I have it working for me using an older version of Chromium.

Puppeteer 1.0.0
Chromium 526987

Puppeteer 1.2.0
Chromium 543305

Puppeteer 1.3.0
Chromium 549031

All Puppeteer versions work as long as the Chromium version is 526987, which in theory should be possible with:

export PUPPETEER_CHROMIUM_REVISION=526987 && npm install

However, that seems to not work correctly: puppeteer/puppeteer#2490

[FlowOverFail]

@benperiton @Zulko Thank you for looking into it more. Even when installing Puppeteer 1.0.0, I still cannot get the sidebar to be on every page. I tried commenting out those two lines you mentioned as well, and the sidebar side not appear where it normally did, nor did it look good.

[Zulko]

I believe what @benperiton meant is that, when you remove these two lines, despite not looking good (because it is not rotated), the sidebar at least appears on every page . Can you confirm that ?