Pat*_*ros 1 html dompdf twitter-bootstrap
我在PHP中使用Dompdf以便以PDF格式打印报告。我不知道如何以在屏幕上看到的方式打印HTML引导程序代码。例如,您知道如果设备较小,引导网格将崩溃。在这种情况下,在我的PDF中,网格看起来就像是位于移动设备或表格中一样,例如col-xs-x或col-sm-x代替col-lg-x。有没有一种方法可以在Dompdf中指定视图的外观col-lg-x?
这是示例html引导程序代码:
$content2='<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>';
Run Code Online (Sandbox Code Playgroud)
这是其余的代码:
$pdf = new Dompdf();
$pdf->loadHtml($content2);
$pdf->render();
$pdf->stream();
Run Code Online (Sandbox Code Playgroud)
举例来说,在我的屏幕,柱
<h3>Column 1</h3>,<h3>Column 2</h3>以及<h3>Column 3</h3>出现在同一行。但是在pdf中,它们分别以不同的行出现(折叠为col-xs-x)。连续有一个。而不是三合一->作为我想要的方式(此处为示例)。
一些注意事项: col-sm-4 col-md-4 col-lg-4
可以简化为 col-sm-4
您遇到的主要问题是PDF转换器基本上是在转换为打印屏幕。打印的最大宽度比浏览器小得多。
你可以尝试COL-XS-4替代