- 首页
- 前端开发
- 在 :always 之后，PDF 无法使用 css 分页符
在 :always 之后，PDF 无法使用 css 分页符
[英] Pdf is not working with css page break after :always
本文介绍了在 :always 之后，PDF 无法使用 css 分页符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个带有 CSS 分页符的 PDF，但 PDF 并没有打破页面.当我删除 postion:absolute 时，它可以工作，但它会在每个页面之后创建空间.我认为这是 CSS 问题，但我不确定.
如果 CSS 有问题，我该如何解决?
<头><标题>PDF </title><style type="text/css"><!--正文 { 字体系列:Arial;字体大小:33.0px }.pos { 位置:绝对；z-索引:0；左:0px；顶部:0px }--></风格><身体><div style="page-break-after: always;"><div class="pos" id="_0:0" style="top:0"><img name="_1170:828" src="page_001.jpg"height="1170" width="828" border="0" usemap="#Map"/></div><div class="pos" id="_126:284" style="top:284;left:126"><span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd"></span>的文档
<div class="pos" id="_126:323" style="top:323;left:126"><span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">采购</span>
<div class="pos" id="_138:975" style="top:975;left:138"><span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">返回日期:<span>12-08-2014</span></span>
<div class="pos" id="_492:975" style="top:975;left:492"><span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">参考号:test</span>
<div class="pos" id="_609:1094" style="top:1094;left:609"><span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000"></span>
<div style="page-break-after: always;"><div class="pos" id="_0:0" style="top:1170"><img name="_1170:827" src="page_002.jpg"height="1170" width="827" border="0" usemap="#Map"/></div><div class="pos" id="_157:1357" style="top:1357;left:157"><span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#61c5c5">内容</span>
<div class="pos" id="_414:1348" style="top:1348;left:414"><span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">部分01
<div class="pos" id="_414:1392" style="top:1392;left:414"><span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">介绍</span>
<div class="pos" id="_154:1560" style="top:1560;left:154"><span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">部分02
<div class="pos" id="_414:1569" style="top:1569;left:414"><span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">部分03
<div class="pos" id="_154:1597" style="top:1597;left:154"><span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">PASS/失败</span>
<div class="pos" id="_154:1615" style="top:1615;left:154"><span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">要求</span>
<div class="pos" id="_414:1607" style="top:1607;left:414"><span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">SELECTION标准</span>
<div style="page-break-after: always;"><div class="pos" id="_0:0" style="top:2340"><img name="_1170:827" src="page_003.jpg"height="1170" width="827" border="0" usemap="#Map"/></div><div class="pos" id="_168:2645" style="top:2645;left:168"><span id="_65.4" style="font-family:Arial; font-size:65.4px; color:#fcfcfc">部分01
<div class="pos" id="_168:2782" style="top:2782;left:168"><span id="_24.5" style="font-weight:bold; font-family:Arial; font-size:24.5px; color:#000000">介绍</span>
<div class="pos" id="_737:3442" style="top:3442;left:737"><span id="_19.1" style="font-style:italic; font-family:Times New Roman; font-size:19.1px; color:#000000">1</span>
</html>
解决方案
当您使用 position:absolute 时，PDF 将使用元素绝对位置呈现.如果删除 position:absolute 而不将元素的 top 和 left 属性更改为零，则它们将相对呈现，您将获得页面之间的空格.
试试:
@media print {.pos { 位置:相对；z-索引:0；左:0px；顶部:0px }}
I am creating a PDF with CSS page breaks, but the PDF is not not breaking the page. When I remove postion:absolute it works, but it creates space after every page. I think it's a CSS problem but I'm not sure.
If there is problem with the CSS, how I can resolve it?
<html>
<head>
<title> PDF </title>
<style type="text/css">
<!--
body { font-family: Arial; font-size: 33.0px }
.pos { position: absolute; z-index: 0; left: 0px; top: 0px }
-->
</style>
</head>
<body>
<div style="page-break-after: always;">
<div class="pos" id="_0:0" style="top:0"><img name="_1170:828" src="page_001.jpg"
height="1170" width="828" border="0" usemap="#Map" /></div>
<div class="pos" id="_126:284" style="top:284;left:126">
<span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">Documents for the</span>
</div>
<div class="pos" id="_126:323" style="top:323;left:126">
<span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">procurement</span>
</div>
<div class="pos" id="_138:975" style="top:975;left:138">
<span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">Return
Date:<span>12-08-2014</span></span>
</div>
<div class="pos" id="_492:975" style="top:975;left:492">
<span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">Reference No : test</span>
</div>
<div class="pos" id="_609:1094" style="top:1094;left:609">
<span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000">
</span>
</div>
</div>
<div style="page-break-after: always;">
<div class="pos" id="_0:0" style="top:1170"><img name="_1170:827" src="page_002.jpg"
height="1170" width="827" border="0" usemap="#Map" /></div>
<div class="pos" id="_157:1357" style="top:1357;left:157">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#61c5c5">Contents</span>
</div>
<div class="pos" id="_414:1348" style="top:1348;left:414">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
01</span>
</div>
<div class="pos" id="_414:1392" style="top:1392;left:414">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">INTRODUCTION</span>
</div>
<div class="pos" id="_154:1560" style="top:1560;left:154">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
02</span>
</div>
<div class="pos" id="_414:1569" style="top:1569;left:414">
<span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
03</span>
</div>
<div class="pos" id="_154:1597" style="top:1597;left:154">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">PASS /
FAIL</span>
</div>
<div class="pos" id="_154:1615" style="top:1615;left:154">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">REQUIREMENTS</span>
</div>
<div class="pos" id="_414:1607" style="top:1607;left:414">
<span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">SELECTION
CRITERIA</span>
</div>
</div>
<div style="page-break-after: always;">
<div class="pos" id="_0:0" style="top:2340"><img name="_1170:827" src="page_003.jpg"
height="1170" width="827" border="0" usemap="#Map" /></div>
<div class="pos" id="_168:2645" style="top:2645;left:168">
<span id="_65.4" style="font-family:Arial; font-size:65.4px; color:#fcfcfc">Part
01</span>
</div>
<div class="pos" id="_168:2782" style="top:2782;left:168">
<span id="_24.5" style="font-weight:bold; font-family:Arial; font-size:24.5px; color:#000000">INTRODUCTION</span>
</div>
<div class="pos" id="_737:3442" style="top:3442;left:737">
<span id="_19.1" style="font-style:italic; font-family:Times New Roman; font-size:19.1px; color:#000000">1</span>
</div>
</div>
</body>
</html>
解决方案
When you use position:absolute the PDF will be rendered using the elements absolute position. If you remove position:absolute without changing the top and left attributes of the elements to zero, they will be rendered relativelly and you will get the spaces between the pages.
Try:
@media print {
.pos { position: relative; z-index: 0; left: 0px; top: 0px }
}
这篇关于在 :always 之后，PDF 无法使用 css 分页符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
