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 ?

[FlowOverFail]

@Zulko For me, the sidebar appeared half way between the first page and the second page, but it was centered horizontally at the bottom of the page despite being cut off mostly. Also, the second page only included like 20% of the sidebar, and everything else was cut off.

[benperiton]

Yep.

@FlowOverFail So with a fresh clone from here, and a clone of the examples repo, start up relaxed report.pug then edit report.scss and remove

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

Save it and then open the pdf and at the bottom of each page there is a pink area - that is the sidebar but obviously not rotated.

Did you remove the package-lock.json and node_modules, edit the package.json to be "puppeteer": "1.0.0" then npm install? That worked for me to get the older version.

Otherwise you can try doing the PUPPETEER_CHROMIUM_REVISION thing and then modifying the puppeteer Luancher.js to accept it.

[benperiton]

@FlowOverFail That is because the styles are set for it being rotated, in order to get it to display properly, you either need to use an older version, or create a new style that doesn't use transform: rotate - as that seems to be the issue

[FlowOverFail]

@benperiton I manually installed puppeteer 1.0.0 using NPM via CMD. Are you saying that I'll need to "remove the package-lock.json and node_modules, edit the package.json to be "puppeteer": "1.0.0" then npm install" in order to use the sidebars as they were intended?

Is manually installing puppeteer 1.0.0 not sufficient enough? Using NPM list only shows 1.0.0.

Edit: I followed your instructions and was able to produce the results I want now. Thank you very much!

[Zulko]

I had a look and it looks to me like a Chromium bug: fixed elements will appear on every page, unless they have a transform:rotate, at which case they will only appear on the first page. This is a regression that happened between chrome 65 and 67. I file a bug report:

https://bugs.chromium.org/p/chromium/issues/detail?id=839424

[Zulko]

So it is indeed a bug from Chromium 67. It is unclear how easy it can be fixed on their end, but they proposed a workaround using writing-mode: vertical-rl instead of transform:rotate, which works fine (thanks Xianzhu), except that the sidebar text now reads top to bottom instead of bottom to top (I prefer the former way). Small price to pay imho, and it makes the CSS easier to understand. I updated the example with that workaround.

[Zulko]

Closing this as the changes in the examples repo removes the problem.