2012-01-08 5 views
12

나는 두 개의 div를 서로 옆에 배치하기 위해 수레를 사용하고 있습니다. 여기html2pdf에서 CSS 플로트로 작업하기

<a href="printbox.php">print</a> 
<?php ob_start(); ?> 
<style> 
    #sidedish{ 
     float: left; 

     border: 1px solid black; 
     width: 100px; 
     height: 100px; 
    } 
    #maindish{ 
     float: right; 
     width: 200px; 
     border: 1px solid black; 
     height: 100px; 
     text-align: center; 
    } 

    #container{ 
     width: 304px; 
     height: 100px; 
     border: 1px solid black; 
    } 
</style> 

<div id="container"> 
<div id="sidedish"></div> 
<div id="maindish"><div id="box">name</div></div> 
</div> 
<?php $_SESSION['boxes'] = ob_get_contents(); ?> 

은, 그냥 PDF로 버퍼링 된 데이터를 렌더링하지만, 설정 한 어떻게 든 수레 과정에서 손실 된 일을 printbox입니다.

<?php require_once('html2pdf/html2pdf.class.php'); ?> 
<?php 
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0)); 
$html2pdf->writeHTML($_SESSION['boxes']); 

$html2pdf->Output('random.pdf'); 
?> 

그것은 HTML에 잘 작동 :

enter image description here

하지만 인쇄를 클릭 할 때이로 변합니다 : 문제가 무엇인지

enter image description here

어떤 생각을?

+1

언급 한 문제를 찾을 수 없습니다. http://jsfiddle.net/DYGvR/show/를 참조하십시오. 크롬에서 마우스 오른쪽 버튼을 클릭하여 테스트하십시오. – Giberno

+0

브라우저를 사용하여 인쇄하고 있습니까? printbox.php는 무엇을합니까? 나는 그가 인쇄 링크를 클릭하고 printbox.php가 어떻게 든 문서의 너비를 설정하고 있다고 가정하고 있습니다. – zethus

+0

내 업데이트 –

답변

23

개인적인 경험으로 말하면, 나는 HTML2PDF의 출력을 스타일링하는 것이 기껏해야 밀교 흑 마법 과학이라고 말합니다. 이에 대한 주요 이유는 다음과 같습니다

  • 이 클래스는
  • CSS 호환성
  • PDF는 HTML 입력
  • 관련 디버깅하는 것은 불가능합니다 문서화되지 않은 & 선택기 CSS 스타일의 (상대적으로 작은) 하위 집합을 지원합니다

공정하게 말하면, 이는 HTML2PDF은 물론 also for the TCPDF that HTML2PDF uses의 문제 일뿐만 아니라

그것은 HTML2PDF에서, TCPDF 단지 거의 제로 - 설정, 빠른 & 쉽게 다른 인터페이스되고, 더 CSS 지원을 차단한다는 할 수 있습니다 -하지만 난 TCPDF 지원하지 않을 것이라고 확신 float 제대로.

<?php 
    $isPdf = (/* condition that tells us we're outputting PDF */) ? true : false; 
    if ($isPdf) { 
     echo "<table><tr><td>"; 
    } 
?> 
<div class="float"> ... </div> 
<?php 
    if ($isPdf) { 
     echo "</td><td>"; 
    } 
?> 
<div class="float"> ... </div> 
<?php 
    if ($isPdf) { 
     echo "</td></tr></table>"; 
    } 
?> 
+1

을 참조하십시오. CSS 해결 방법을 알아 내려고 노력하면서 내 머리를 찢어 내고 나 한테 큰 도움이되었습니다. 테이블 위로! 또한, fyi, 나는 완전히 다른 페이지 사본을 만들었고, PDF의 경우에는 거기에 직접 전달했습니다. 그렇지 않은 경우 비 테이블에 직접 연결하십시오. – Cyprus106

+2

나는 똑같은 문제가 있었다. 내 솔루션은 잘 작동하는 float 대신 절대 위치 지정을 사용하는 것이지만 컨테이너 크기를 설정해야합니다. – TheFrozenOne

+0

사실, HTML2PDF는 절대 위치 지정, 여백 및 패딩을 포함하여 TCPDF보다 훨씬 더 많은 CSS를 지원합니다. 언급 할만한 가치가 있습니다. –

6

당신은 볼 수 있습니다 : 당신은 또한 공공 HTML에서이 당혹감을 숨길 수

<table> 
    <tr> 
     <td><div class="float"> ... </div></td> 
     <td><div class="float"> ... </div></td> 
    </tr> 
</table> 

: 당신이 사용할 수

가장 좋은 해결 방법은 90 년대에 떠있는 div를 보내는 것입니다 프랑스어로 된 온라인 설명서는 여기에 있습니다 : http://demo.html2pdf.fr/examples/pdf/about.pdf

('Les float ne sont gérés que pour la balise IMG')

= 수레은 클래스에 의해 마크 업을을 IMG에 대한 처리됩니다.

취급 CSS 속성도 문서에 나와 있습니다.