如何使用paged.js确保我的背页打印在小册子的背页上

Question

给定一本用折页打印的小册子，底页的号码将始终是4的倍数。如果内容的4页不是整数倍，则底页将在小册子内。

我的项目正在使用Paged.js进行布局和分页。 （非常好！）它带有selector that handles the first page，但最后一页没有。

如何在文档末尾插入空白页，以将最后一页的内容推送到文档的背面？

Answer 1

[如果有能力胜过我的人可以提供对此的改进版本，我很乐意。我怀疑breakToken等可以解决很多问题。但是，这对我有用：

未分页的html包含一个具有.back-page类的div。这里的策略是查看后页div所在的页号是否具有可被4整除的页号。如果不是，则插入一个大的空div。

The JS

window.PagedConfig = { auto: false };

document.addEventListener("DOMContentLoaded", function () {
  class MyHandler extends Paged.Handler {
    constructor(chunker, polisher, caller) {
      super(chunker, polisher, caller);
    }

    beforeParsed(content) {}
    afterParsed(parsed) {}
    beforePageLayout(page) {}

    afterPageLayout(pageFragment, page, breakToken) {
      bumpBackPageContentToRealBackPage(pageFragment);
    }

    afterRendered(pages) {}
  }
  Paged.registerHandlers(MyHandler);

  setTimeout(() => window.PagedPolyfill.preview(), 2000); // TODO: swap this for the promise version
});

function bumpBackPageContentToRealBackPage(pageFragment) {
  let backPage = pageFragment.querySelector(".back-page");
  if (backPage) {
    let pageNumberStr = backPage.closest(".pagedjs_page").dataset.pageNumber;
    let pageNumber = parseInt(pageNumberStr, 10);
    console.log("last page is on", pageNumber);
    if (pageNumber % 4 !== 0) {
      console.log("last page needs a nudge");
      let pageDiv = document.createElement("div");
      pageDiv.classList.add("end-vacat-page");
      backPage.parentElement.insertBefore(pageDiv, backPage);
    } else {
      console.log("All is well: last page will print on the back page");
    }
  }
}

CSS

.back-page {
  break-before: left;
}
.end-vacat-page {
  page-break-before: always;
  height: var(--pagedjs-pagebox-height);
}

这将触发重排，然后由于Paged.js polyfill规则之一，导致后页必须位于左手页面上，因此它将再次颠簸直到它位于左手页面上。