html - 使用飞碟生成风景 pdf？

Question

我正在使用飞碟生成 pdf 文件。我想要第一页，第二页处于横向模式，其余页面处于纵向模式。所以，我这样做：

@page {
    margin-top: 3.3cm;
    margin-left: 2cm;
    margin-right: 2cm;
    margin-bottom: 3.3cm;
    size: A4 portrait;
    height: 21cm; width: 28.6cm
}

@page land { size: a4 landscape;}
.landscapePage { page:land; height: 21cm; width: 28.6cm}



<div class="page-break landscapePage">
 page 1
</div>

<div class="page-break landscapePage">
 page 2
</div>

但它会自动在第一个 pdf 文件中创建 2 个空白页？我如何解决它？

标签： htmlcssflying-saucer

Answer 1

我认为罪魁祸首是height横向页面中的属性。

高度（21cm）加上边距（2*3.3cm）大于（真实）页面上的可用高度，飞碟添加了一个额外的页面来处理内容。

使其工作的最简单方法是删除有关大小的属性。唯一需要的是横向页面上的宽度，以确保 div 将使用整个页面宽度。

    .page-break{page-break-before: always}
    @page {
        margin-top: 3.3cm;
        margin-left: 2cm;
        margin-right: 2cm;
        margin-bottom: 3.3cm;
        size: A4 portrait;
    }

    @page land { size: a4 landscape;}
    .landscapePage { page:land; width:25.3cm}