Как добавить автоматический разрыв страницы и нижний колонтитул на страницу в JSPDF? ⇐ CSS

[Anonymous]

Как добавить страницу автоматически, когда будет напечатана страница, я использую плагин JSPDF в Vuejs 2, можно ли добавить разрыв страницы с помощью этих плагинов? src = "https://i.sstatic.net/icmca.png" /> < /p>
Вот мой код: < /p>


.final-proof-container {
width: 1296px;
height: 775px;
/* background-color: #e8e8e8; */
border-top: 6px solid #383434;
border-left: 6px solid #383434;
border-right: 6px solid #383434;
/* padding: 10px 10px 10px 10px; */
/* display: inline-flex;
flex-direction: column;
flex-wrap: wrap; */
}

.final-proof-content {
/* width: 330px; */
min-height: 350px;
background-color: #474747;
display: flex;
flex-direction: row;
color: white;
border-radius: 5%;
/* margin-left: 8px;
margin-right: 4px; */
font-weight: 400;
font-family: "Open Sans", sans-serif;
font-size: 12px;
/* padding: 10px 10px 10px 10px; */
/* margin: 10px 10px 10px 10px; */
/* margin-bottom: 10px; */
}

.material-type {
display: flex;
flex-direction: row;
align-items: center;
}

.left-content {
width: 60%;
padding-top: 10px;
padding-left: 10px;
}

.right-content {
width: 40%;
padding-top: 10px;
padding-left: 5px;
padding-right: 10px;
}
.right-content img {
width: 100%;
height: 50%;
}

.dimensions {
list-style: none;
}
.option-logo {
width: 20px;
height: 12px;
}

.material-circle {
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
}

.final-proof-footer {
background-color: black;
width: 1296px;
}

.top-section {
background-color: #303030;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
color: white;
font-weight: bolder;
font-family: "Open Sans", sans-serif;
}
.bottom-section {
display: flex;
flex-direction: row;
color: white;
flex-wrap: wrap;
justify-content: center;
height: 175px;
}
.logo {
width: 20%;
display: flex;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
min-width: 300px;
}
.order {
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
flex-wrap: wrap;
min-width: 300px;
}
.location {
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
flex-wrap: wrap;
min-width: 300px;
}
.shipping {
width: 26.8%;
display: flex;
flex-direction: row;
align-items: center;
border-right: 4px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
justify-content: center;
flex-wrap: wrap;
}
.order img {
width: 40px;
height: 40px;
}
.location img {
width: 40px;
height: 40px;
}
.shipping img {
width: 40px;
height: 40px;
}
.text-content {
display: flex;
flex-direction: column;
line-height: 0.1;
font-size: 14px;
}
.order-type {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-weight: bolder;
font-size: 20px;
text-align: center;
margin-right: 30px;
}
.logo img {
width: 200px;
height: 150px;
}< /code>

Код: Выделить всё

Generate







Product(s):  {{ getSectionNo(item) }}
Material Type:



{{ item.material.material_type.name }}


Dimensions:
[list]                  v-if="Array.isArray(getDimensions(item))"
class="dimensions mb-2"
>
[*]                    v-for="(dimension, key) in getDimensions(item)"
:key="key"
>
{{ dimension.section_no }} - W: {{ dimension.width }}"| H:
{{ dimension.height }}"

[/list]
Options:




[img]/assets/img/price_point.png[/img]
                        class="option-logo"
alt="Logo"
/>


Price Point: 2/$4.00







[img]/assets/img/comments.png[/img]
                        width="20"
height="15"
alt="Comments"
/>



Comments/Text: "Thanks for Shopping"








[img]/assets/img/image.png[/img]
                        width="20"
height="15"
alt="Logo"
/>


Logo: logo.png







[img]/assets/img/qty.png[/img]
                        width="21"
height="8"
alt="Quantity"
/>


Quantity: 2







Подробнее здесь: [url]https://stackoverflow.com/questions/71377726/how-to-add-auto-page-break-and-footer-per-page-in-jspdf[/url]