文章/答案/技术大牛

发布

社区首页 >问答首页 >将HTML转换为PDF时，在每页上重复左侧部分

问将HTML转换为PDF时，在每页上重复左侧部分
EN

Stack Overflow用户

提问于 2021-01-24 03:42:13

回答 1查看 37关注 0票数 0

*我的目标是我想用动态数据构建简历，但我这里的问题是，我希望在每一页上重复左侧。

我寻找了如何解决这个问题，但我只是找到了如何设置页眉和页脚。它没有提到重复部分或元素，甚至没有提到div。

有谁能帮上忙吗？

<!DOCTYPE html>
<html lang="fr-FR">

<head>
    <meta charset="utf-8">
    <title>
    </title>
    <style>
    /** GLOBAL STYLES **/
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        font-family: "Arial";
        height: 100%;
    }
    
    .text-uppercase {
        text-transform: uppercase;
    }

    .font-weight-400 {
        font-weight:400;
    }

    .border-bottom {
        border-bottom: 5px solid #fd4345;
    }

    /** COLORS **/
    .primary-color {
        color: #fff;
    }

    .gray-color {
        color: #b7bcc1;
    }

    .secondary-color {
        color: #263547;
    }

    /** BACKGROUND COLORS **/
    .white-bg-color {
        background-color: #fdfdfd;
    }

    .primary-bg-color {
        background-color: #fd4345;
    }

    .secondary-bg-color {
        background-color: #263547;
    }

    /** SPACING **/
    .padding-top-100 {
        padding-top: 100px;
    }

    .padding-left-50 {
        padding-left: 50px;
    }

    .padding-bottom-40 {
        padding-bottom: 40px;
    }

    .margin-left-50 {
        margin-left: 50px;
    }

    .margin-top-50 {
        margin-top: 50px;
    }

    .margin-bottom-50 {
        margin-bottom: 50px;
    }

    .margin-top-20 {
        margin-top: 20px;
    }

    .margin-bottom-20 {
        margin-bottom: 20px;
    }

    .margin-bottom-10 {
        margin-bottom: 10px;
    }

    /** WIDTH **/
    .width-30 {
        width: 30%;
    }

    .width-70 {
        width: 70%; 
    }

    /** HEIGHT **/
    .height-100 {
        height: 100%;
    }

    .height-80 {
        height: 80%;
    }

    .height-20 {
        height: 20%;
    }

    .height-20-px {
        height: 20px;
    }

    /** FONT SIZES **/

    .font-size-4 {
        font-size: 4rem;
    }

    .font-size-1-4 {
        font-size: 1.4rem;
    }

    /** FLOAT **/
    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    @media print {
        
    }

    </style>
</head>

<body>
    <div class="height-100">
        {{! INFO PERSONNEL }}
        <div class="height-20 primary-bg-color">
            <div class="padding-top-100 padding-left-50">
                <h1 class="font-size-4 font-weight-400 text-uppercase primary-color">
                    {{personalDetails.firstName}} {{personalDetails.lastName}}
                </h1>
                <h2 class="font-weight-400 text-uppercase secondary-color">
                    {{profileDetails.profile}}
                </h2>
            </div>
        </div>
        {{! INFO PERSONNEL }}

        {{! LEFT SIDE }}
        <div class="float-left width-30 secondary-bg-color height-80">
        </div>
        {{! LEFT SIDE }}

        {{! RIGHT SIDE }}
        <div class="float-right width-70 white-bg-color height-80">

            {{! DOMAINES DE COMPETENCES }}
            {{#profileSkills.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">DOMAINES DE COMPETENCES</h2>
                {{#profileSkills}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">{{ skillCategory }}</p>
                    <span>{{ skills }}</span>
                </div>
                {{/profileSkills}}
            </div>
            {{/profileSkills.length}}
            {{! DOMAINES DE COMPETENCES }}

            {{! ETUDES ET FORMATIONS }}
            {{#educations.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">ETUDES ET FORMATIONS</h2>
                {{#educations}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">
                        {{institute.name}}
                    </p>
                    <span>{{qualification}}</span>
                    <span>|</span>
                    <span>{{startDate.month}} {{startDate.year}}-</span>
                    <span>{{endDate.month}} {{endDate.year}}</span>
                </div>
                {{/educations}}
            </div>
            {{/educations.length}}
            {{! ETUDES ET FORMATIONS }}

            {{! ETUDES ET FORMATIONS }}
            {{#educations.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">ETUDES ET FORMATIONS</h2>
                {{#educations}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">
                        {{institute.name}}
                    </p>
                    <span>{{qualification}}</span>
                    <span>|</span>
                    <span>{{startDate.month}} {{startDate.year}}-</span>
                    <span>{{endDate.month}} {{endDate.year}}</span>
                </div>
                {{/educations}}
            </div>
            {{/educations.length}}
            {{! ETUDES ET FORMATIONS }}

            {{! ETUDES ET FORMATIONS }}
            {{#educations.length}}
            <div class="border-bottom margin-left-50 margin-top-50 margin-bottom-50 padding-bottom-40">
                <h2 class="secondary-color font-weight-400">ETUDES ET FORMATIONS</h2>
                {{#educations}}
                <div class="margin-top-20 margin-bottom-20">
                    <p class="secondary-color margin-bottom-10 font-size-1-4" style="font-weight: bold;">
                        {{institute.name}}
                    </p>
                    <span>{{qualification}}</span>
                    <span>|</span>
                    <span>{{startDate.month}} {{startDate.year}}-</span>
                    <span>{{endDate.month}} {{endDate.year}}</span>
                </div>
                {{/educations}}
            </div>
            {{/educations.length}}
            {{! ETUDES ET FORMATIONS }}

        </div>
        {{! RIGHT SIDE }}

    </div>
</body>
</html>

您可以在此处查看结果输出：

您可以在此处查看结果输出：

html

pdf

html-pdf

回答 1

Stack Overflow用户

发布于 2021-01-24 03:54:54

为了对齐div和其他类似的东西，必须使用称为网格 over float属性的CSS特性。这是当前关于前端构建的标准。你会发现这种方式会更容易布局你的网站。

参考文献：

CSS-TRICKS | A Complete Guide to Grid

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65863632

复制

相似问题

问将HTML转换为PDF时，在每页上重复左侧部分
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将HTML转换为PDF时，在每页上重复左侧部分EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将HTML转换为PDF时，在每页上重复左侧部分
EN