Vue 3 中的 PagedJS 会忽略分页尝试

Question

我一直在尝试在 Vue.js 3 中实现分页符。我一直在使用以下 CSS，看起来它确实有效，因为我可以修改 titlePage 例如居中/不居中。然而，“.page-break”类的参数似乎让我困惑。您可以在下面看到我让它发挥作用的所有尝试。没有使用其他外部 CSS 导入。我正在使用 Vue-Showdown 进行 Markdown 到 HTML 的转换。

您在下面看到的分页尝试都没有真正起作用，我非常困惑为什么它们不起作用。

*请注意，如果我不将其发送到 PagedJS，这确实有效，就像直接打印函数一样

我的用例是，我需要使用 PagedJS 生成分页内容，以使用页码更新我的目录，然后我将打印它。

我一直在抓狂，为什么这不起作用。

@page {
    size: A4;
    margin: 20mm;
    @bottom-right-corner {
        vertical-align: center;
        text-align: center;
        background: #fafafa;
        color: purple;
        content: "P. " counter(page);
    }
}

h1 {
    break-before: page;
    page-break-before: always;

}

.pagedjs_page {
    break-before: page;
    page-break-before: always;

}

@media print {
    h1, h2 {
        break-before: page;
        page-break-before: always;

    }
    .page-break {
        break-before: page;
        page-break-before: always;

    }
}

@media screen {
    h1, h2 {
        break-before: page;
        page-break-before: always;

    }
    .page-break {
        break-before: page;
        page-break-before: always;

    }
}

table, figure {
    page-break-inside: avoid; /* Avoid breaking these elements across pages */
} 

.title-page {
    break-after: always;
    page-break-before: always;
    text-align: center;
    padding-top: 60mm;
}

.page-break {
    break-before: page;
    page-break-before: always;

}

.content-page {
    padding: 15mm 20mm;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10mm auto;
} 

<div class="title-page">${titleContent}</div>
<div class="content-page">${restOfContent.innerHTML}</div>
<div class="footer"></div>

我尝试使用不同的格式、类型来操纵分页符，但它似乎没有破坏任何东西。

Answer 1

@page {
    size: A4;
    margin: 20mm;
    @bottom-right-corner {
        vertical-align: center;
        text-align: center;
        background: #fafafa;
        color: purple;
        content: "P. " counter(page);
    }
}

h1 {
    break-before: page;
    page-break-before: always;

}

.pagedjs_page {
    break-before: page;
    page-break-before: always;

}

@media print {
    h1, h2 {
        break-before: page;
        page-break-before: always;

    }
    .page-break {
        break-before: page;
        page-break-before: always;

    }
}

@media screen {
    h1, h2 {
        break-before: page;
        page-break-before: always;

    }
    .page-break {
        break-before: page;
        page-break-before: always;

    }
}

table, figure {
    page-break-inside: avoid; /* Avoid breaking these elements across pages */
} 

.title-page {
    break-after: always;
    page-break-before: always;
    text-align: center;
    padding-top: 60mm;
}

.page-break {
    break-before: page;
    page-break-before: always;

}

.content-page {
    padding: 15mm 20mm;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10mm auto;
}

<div class="title-page">${titleContent}</div>
<div class="content-page" v-html="restOfContent.innerHTML"></div>
<div class="footer"></div>