Dynamic Table of Contents Page Numbers

[GlitchWitch]

Has anyone here ever successfully setup a dynamic table of contents?

We are trying to convert an existing template used in Google docs with a ToC on page 2, however since the titles for content can be on different pages depending on the height of the content the ToC page numbers are not static.

Any suggestions for how to handle this besides just removing the ToC page numbers all together?

[mutschler]

So I'd use something like:

ul.toc li a::after {
  content: target-counter(attr(href), page);
  float: right;
}

See: https://www.w3.org/TR/css-gcpm-3/#target-counter
i don't think chrome supports target-counter out-of-the-box so you might need to polyfill that

[nbyloff]

@GlitchWitch did you solve this issue? caniuse.com doesn't even reference target-counter yet.

[mutschler]

@nbyloff sure i use setOption to inject styles like this ->setOption('addStyleTag', json_encode(['content' => 'body{ font-size: 14px; }'])) (also works with local/remote files) see https://spatie.be/docs/browsershot/v2/usage/creating-images#content-adding-css or https://github.com/puppeteer/puppeteer/blob/v1.9.0/docs/api.md#pageaddstyletagoptions.

same goes for javascript: ->setOption('addScriptTag', json_encode(['url' => 'https://unpkg.com/pagedjs/dist/paged.polyfill.js'])) for the paged.js polyfill.

from a quick test: it seems like bleed: 5mm might be the problem there which doesn't seem to be supported and causing issues. try:

@media print {
  @page {
    size: letter landscape;
    margin: 5mm;

    @bottom-right-corner {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
    }
  }

or get rid of the bleed/margin all together

[nbyloff]

Thanks for all of this @mutschler! I changed bleed to margin and the only thing it changed was the spacing on the page numbering in the bottom right (cut off a lot of the text). I removed margin & bleed all together and it only caused the tables in my PDF not to break properly between pages.

None of these options switched it to landscape. I backed out most content and removed the bootstrap 5 and font awesome libraries, still didn't fix the landscape issue. I've also noticed that while in portrait, it seems to only use the top half of the page. The content & footer page numbering breaks exactly half way down and the bottom half is just whitespace, in portrait mode.

This is how I use browsershot to generate it currently. Currently googling for anyone with similar issues.

$pdf = Browsershot::html(View::make('reports.test_report.layout', $data))
      ->setNodeBinary($nodeExecutable)
      ->setNpmBinary($npmExecutable)
      ->timeout(600)
      ->waitUntilNetworkIdle()
      ->setOption('args', ['--disable-web-security']); // maybe fixes issues related to cors, etc

$pdf->save($this->localFile);

[mutschler]

@nbyloff that's kinda strange 🤔 I'd guess maybe bootstrap or something is messing with your styles i try to use print only styles whenever possible.

I get the same issue (only top half of page is printed and landscape is ignored) if i use bleed if i remove the bleed or replace it with margin/padding the page is correctly rendered in landscape

EDIT: i've made a test with a random stack overflow page:

@media print {
  @page {
    size: letter landscape;
   bleed: 5mm;

    @bottom-right-corner {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
    }
  }

@media print {
  @page {
    size: letter landscape;
   padding: 5mm;

    @bottom-right-corner {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
    }
  }

[mutschler]

@nbyloff regarding the Javascript for TOC when using pagedjs, if you include it direclty in the page (not with browsershot setOption) it should work, if you'll inject pagedjs with setOption you might have to path the script shipped with browsershot since pagedjs seems to need a few things done which the default script doesn't wait for (thats why i opened a PR see https://github.com/spatie/browsershot/pull/656/files#diff-cf3cf638bb81dcbceae2da6663675b1943260ed88b0aba660ac7b03d4159bc11 for the changes)

[nbyloff]

@mutschler Thank you! Not sure what did it, but I kept clearing the cache and resetting everything and it's finally loading in landscape. I didn't have to use bleed or padding. Going to try it next with padding though. I went over your PR code too, hope they take it. Looks great!

I have gotten some smaller PDF reports to run (~50 pages) but having some memory issues on other reports. It looks like it is splitting table rows one per page (and I have huge tables in some cases), so the pages just go on until the browser crashes I guess.

Bootstrap has been styling and handling that format properly up until now (even in the first 50 page report), so we'll see what the problem is. I'm thinking it has to do with too many columns, but I'll get it figured out. Thanks for all your help!

[AleeeKoi]

Hello @mutschler , I'm facing the same issue trying to add a TOF at the second page, every link must show the correct page number.
I have tried to use paged polyfill without success.

I'm using the browsershot@5, puppeteer@24 and chromium@132.

Could you please share a working example? Thank you.