php - laravel-dompdf | 将 div 显示为列,如 flex
问题描述
我正在创建以 PDF 格式导出会议详细信息的布局。布局时出现问题。我想将 div 显示为一列。例如图像 display: flex
不工作,我正在尝试表格、表格单元格、表格弹性和表格网格但不工作。主要内容向下移动侧边栏长度。
我的所有刀片 html 代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap" rel="stylesheet">
<style media="screen">
@font-face {font-family: "Roboto-Light"; font-style: normal; font-weight: 300; src: url({{ url('fonts/Roboto-Light.ttf') }})}
@font-face {font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url({{ url('fonts/Roboto-Regular.ttf') }})}
@font-face {font-family: "Roboto-Bold"; font-style: normal; font-weight: bold; src: url({{ url('fonts/Roboto-Bold.ttf') }})}
body { font-family: 'Roboto-Regular'; }
* { margin: 0; padding: 0; }
.sidebar {
position: relative;
left: 0.9cm;
width: 5cm;
}
.page-break-after {
page-break-after: auto;
}
body {
padding-top: 3cm;
padding-bottom: 100px;
}
.wrapper {
position:relative;
width: 21cm;
display: table;
}
</style>
</head>
<body style="background: url({{ url('pdf-export-background.png') }});background-size: 100% 100%;">
<div class="wrapper">
<div class="sidebar" style="">
<p style="text-align:center;font-size:8px;">{{ $meeting['place'] }}</p>
<!-- List Item -->
<p style="margin-top: 15px;">
<h4 style="margin-left:5%;font-family:'Roboto-Bold' !important;font-size:10px;">
<span style="border-bottom: 1px solid #000;">Düzenleyen</span>
</h4>
<p style="padding-left: 5%;">
<span style="font-size:9px;">{{ $meeting['created_user']['name'] }}</span>
<span style="font-size:7px;font-weight:300;line-height:9px;">{{ $meeting['job_title_name'] }}</span>
</p>
</p>
<!--#List Item -->
</div>
<div style="position: relative;width: 5.7cm;">
THE MAIN CONTENT
</div>
</div>
</body>
</html>
解决方案
在撰写本文时,Dompdf 不支持 flexbox(当前版本为 0.8.4)。有关详细信息,请参阅问题 971。
您可以使用各种样式生成该布局,但如果您的内容超出页面的长度,您将在 Dompdf 呈现过程中遇到一些奇怪的问题。我建议将侧边栏浮动到左侧并在主要内容上设置左边距。
像这样的东西:
<div>
<div style="float: left; width: 25%; height: 80%; background-color: #cc6633;"></div>
<div style="margin-left: 35%; width: 65%; height: 80%; background-color: #3366cc;"></div>
</div>
推荐阅读
- mysql - HTTP 从 api 获取请求并将结果加载到 Mysql
- ubuntu - NetworkManager 不支持非默认路由表
- amazon-web-services - Kubernetes 负载均衡器外部 IP 仅对特定集群公开
- javascript - 在 React 中引发和处理事件
- java - Java swing:如果我不调用 setLayout 方法,setBounds 方法不起作用?
- javascript - 如何为 SignalR 创建 Azure Functions 输出绑定以将**连接**添加到组?
- python - python文件中的cron表达式
- kubernetes - eksctl 在创建后应用集群更改
- r - 使用 R 根据多个条件过滤记录的优雅方法
- node.js - API 调用后未定义的响应