合并HTML

通过合并所有HTML文档，然后使用正在成功完成的速度填充占位符，但在分页中出现问题。我希望每个HTML页面都转换为1 pdf页面，但在这种情况下，所有文本都会合并。

转换后合并PDF

这种方法对我来说似乎不对，因为从各个HTML页面单独生成每个PDF页面然后合并到1个pdf文档不是一个增强的解决方案。

您对编码示例的建议将受到高度赞赏。

Answer 1

我正在寻找一种合并文档的方法。

我确实知道如何在使用单个HTML文档时启动新页面。试试这个：

<html>
<head>
    <style>
        @page { /* default page styles here */

        @page p1 { /* page template for first document */ }
        @page p2 { /* page template for second document */ }
        @page p3 { /* page template for third document */ }
        @page p4 { /* page template for fourth document */ }

        #p1 { page: p1; } /* tells #p1 to use p1 page template */
        #p2 { page: p2; } /* tells #p2 to use p2 page template */
        #p3 { page: p3; } /* tells #p3 to use p3 page template */
        #p4 { page: p4; } /* tells #p4 to use p4 page template */
    </style>
</head>

<body>
</body>

    <article id="p1">
        <!-- page 1 content here -->
    </article>

    <article id="p2">
        <!-- page 2 content here -->
    </article>

    <article id="p3">
        <!-- page 3 content here -->
    </article>

    <article id="p4">
        <!-- page 4 content here -->
    </article>

</html>

我的理解是，当元素需要不同的页面模板时，将添加分页符。

如果您不需要不同的页面模板（页眉，页脚等都是相同的），那么您可能只需要为每篇文章请求分页符：

article { page-break-before: always; }

Answer 2

我选择合并HTML模板，并使用后面的CSS在必要的地方对其进行分页。

    <style type="text/css"> 
    @page { size:letter; padding:0; margin:0.5in 25px 100px 25px;}
    *{ font-family: "verdana", tahoma, arial, sans-serif;}
     table { -fs-table-paginate: paginate; thead {
    display:table-header-group;}}
    @page {
         @top-center { content: element(header) }
    }
    @page:first {
        margin:30px 25px 100px 25px;
         @top-center { content: element() }
    }
    table.header {
        height:100px;
        display: block; text-align: center; 
        position: running(header);
    }
    div.footer {
        display: block; text-align: center;
        position: running(footer);
    }
    div.content {page-break-after: always;}

     #footer {
    position: running(footer);
    text-align: right;
    }

    #pagenumber:before {
    content: counter(page);  }

    #pagecount:before {
    content: counter(pages);  }


</style>

飞碟：将多个Html转换为1个PDF文档

合并HTML

转换后合并PDF

2 个答案: