PDF не работает с разрывом страницы CSS после: всегда

Question

PDF не работает с разрывом страницы CSS после: всегда

0

Я создаю PDF с разрывами страниц CSS, но PDF не нарушает страницу. Когда я postion:absolute он работает, но он создает пространство после каждой страницы. Я думаю, что это проблема CSS, но я не уверен.

Если есть проблемы с CSS, как я могу это решить?

<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>

Muhammad Rashid 27 нояб. 2013, в 15:38

Источник

Теги:

javascript

html

css

pdf

phantomjs

1 ответ

Ещё вопросы

Italo Borssatto · Answer 1 · 2013-11-27T14-50-00.000Z

Когда вы используете position:absolute формат PDF будет отображаться с использованием абсолютных позиций элементов. Если вы удалите position:absolute не изменяя top и left атрибуты элементов на ноль, они будут отображаться релятививно, и вы получите промежутки между страницами.

Пытаться:

@media print {
    .pos { position: relative; z-index: 0; left: 0px; top: 0px }
}

так что мне делать? как я могу это сделать?
И ответ, и пример кода приведены в ответе. Это работает? Какая часть вас смущает?