使用dompdf或tcpd将html / css代码呈现为pdf时出错
问题描述 投票：0回答：1
通过向dompdf函数输入html / css代码，这将打印错误的pdf，其中所有文本都被覆盖在同一行上，并导致无意义的分页符
我尝试使用tcpdf和其他应用程序打印相同的html，但未获得预期的结果，所有单词始终呈现在同一行中，并且不显示css
这是我要在pdf中打印的代码html
这是我的用于打印PDF的文件控制器
namespace App\Http\Controllers;
use App\Files;
use Illuminate\Http\Request;
use Elibyy\TCPDF\Facades\TCPDF;
use Dompdf\Dompdf;
public function index()
{
header('Content-type: application/pdf');
http_response_code(200);
include 'l_vars/planilla_solicitud_logistica.php';
$dompdf = new Dompdf();
$dompdf->set_option('isHtml5ParserEnabled', true);
$dompdf->loadHtml($planilla);
$dompdf->render();
$dompdf->stream();
}
这是我要在pdf中处理的电子表格的html代码，此信息必须是动态的，因为它将从数据库中获取
<style>
.bloque{
display : table;
border : 1px solid black;
width : 100%;
}
.planilla{
width : 216mm;
height : 279mm;
border : 1px solid black;
padding: 2.5cm 2cm;
display: flex;
flex-direction: column;
justify-content: initial;
font-family: 'Lato', sans-serif;
}
.logo{
margin: 15px;
height: 60px;
}
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.databloq{
display: flex;
flex-direction: column;
}
.databloq{
font-size: 0.5rem;
}
.logocontainer{
display: flex;
flex-direction: columns;
justify-content: center;
}
.header .bloque{
height: 2.55cm;
}
.bloqrow{
display: flex;
border: 1px solid black;
flex-direction: column;
justify-content: center;
height: 100%;
}
.header div {
display: flex;
flex-direction: column;
justify-content: center;
}
.campo{
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid black;
height: .7cm;
font-size: .65rem;
}
.campor{
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid black;
height: 1.2cm;
font-size: .9rem;
}
.formbloq{
text-align: center;
display: flex;
}
.titulo{
width: 100%;
background-color: #BBBDC0;
border: 1px solid black;
text-align: center;
font-size: .75rem;
height: .5cm;
display: flex;
flex-direction: column;
justify-content: center;
}
.checkox{
width: 10px;
height:10px;
margin: 3px;
border: 1px solid black;
align-self: flex-end;
}
.check{
display: flex;
flex-direction: row;
align-content: flex-start
}
.labelgrey{
text-align: center;
}
.sign{
border: 1px solid black;
height: .7cm;
font-size: .7rem;
display: flex;
flex-direction: row;
}
</style>
<body>
<div class="planilla" id="content">
<div class="header">
<div class="bloque logocontainer" style="width: 40%;">
<img class="logo" src="spsapplogo.png" alt="Logo de Southern Procurement Services">
</div>
<div class="bloque" style="text-align:center;font-size:1.3rem">
<strong>Solicitud de Logistica de Viajes</strong>
</div>
<div class="databloq" style="width: 40%;">
<div class="bloqrow">
Codigo: SPS-FAD-007
</div>
<div style="display: flex; flex-direction: row; height: 100%;">
<div class="bloqrow" style="height: auto;width: 100%;">
Edicion: 1
</div>
<div class="bloqrow" style="height: auto;width: 100%;">
Revision: 0
</div>
</div>
<div class="bloqrow">
Pag 1 de 2
</div>
<div class="bloqrow">
Fecha 17/10/2018
</div>
</div>
</div>
<div class="titulo">
Datos del Solicitante
</div>
<div class="formbloq">
<div class="campo" style="width: 60%;">
<div class="label">Nombre y Apellido del Solicitante</div>
<div class="input"> <strong>Eleazar Ortega</strong> </div>
</div>
<div class="campo" style="width: 30%;">
<div class="label">Cedula de Identidad</div>
<div class="input"> <strong>V. 20.616.897</strong> </div>
</div>
<div class="campo" style="width: 30%;">
<div class="label">Unidad o Area</div>
<div class="input"> <strong>IT</strong> </div>
</div>
<div class="campo" style="width: 30%;">
<div class="label">Sede</div>
<div class="input"> <strong>Chuao</strong> </div>
</div>
<div class="campo" style="width: 25%;">
<div class="label">Fecha de Solicitud</div>
<div class="input"> <strong>01/01/2023</strong> </div>
</div>
</div>
<div class="titulo">
NACIONAL (VENEZUELA)
</div>
<div class="formbloq">
<div class="campo" style="width: 30%;">
<div class="check">
<div class="text">Traslado en Vehiculo de la Empresa</div>
<div class="checkox"></div>
</div>
</div>
<div class="campo" style="width: 70%; background-color: #BBBDC0;">
<div class="labelgrey">
Motivo del Viaje
</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 30%;">
<div class="check">
<div class="text">Traslado a Aeropuerto</div>
<div class="checkox"></div>
</div>
</div>
<div class="campo" style="width: 70%;">
<div class="labelgrey">
</div>
</div>
</div>
<div class="titulo">
Tipo de Traslado
</div>
<div class="titulo">
Traslado Terrestre Nacional (Venezuela)
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen y/o Direccion</div>
</div>
<div class="campo" style="width: 15%;">
<div class="label">Tiempo de Espera</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino y/o Direccion</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 15%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen y/o Direccion</div>
</div>
<div class="campo" style="width: 15%;">
<div class="label">Tiempo de Espera</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino y/o Direccion</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 15%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen y/o Direccion</div>
</div>
<div class="campo" style="width: 15%;">
<div class="label">Tiempo de Espera</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino y/o Direccion</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 15%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="titulo">
Traslado Terrestre Urbano (Venezuela)
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen y/o Direccion</div>
</div>
<div class="campo" style="width: 15%;">
<div class="label">Tiempo de Espera</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino y/o Direccion</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 15%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen y/o Direccion</div>
</div>
<div class="campo" style="width: 15%;">
<div class="label">Tiempo de Espera</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino y/o Direccion</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 15%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen y/o Direccion</div>
</div>
<div class="campo" style="width: 15%;">
<div class="label">Tiempo de Espera</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino y/o Direccion</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 15%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="titulo">
Traslado Terrestre Urbano (Venezuela)
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Origen</div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Destino</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 20%;">
<div class="label">Fecha de Retorno: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 10%;">
<div class="label">Hora: <strong> 10:00 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label"></div>
</div>
</div>
<div class="titulo">
Hospedaje
</div>
<div class="formbloq">
<div class="campo" style="width: 30%;">
<div class="label">Fecha de Entrada: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 30%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Lugar o Ciudad: <strong>Cabimas Hotel Europa</strong></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 30%;">
<div class="label">Fecha de Entrada: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 30%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Lugar o Ciudad: <strong>Cabimas Hotel Europa</strong></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 30%;">
<div class="label">Fecha de Entrada: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 30%;">
<div class="label">Fecha de Salida: <strong> 01/01/2023 </strong></div>
</div>
<div class="campo" style="width: 40%;">
<div class="label">Lugar o Ciudad: <strong>Cabimas Hotel Europa</strong></div>
</div>
</div>
<div class="titulo">
Observaciones
</div>
<div class="formbloq">
<div class="campo" style="width: 100%;">
<div class="label"></div>
</div>
</div>
<div style="display:flex">
<div class="titulo" style="width:50%">
Aprobado Por
</div>
<div class="titulo" style="width:50%">
Recibido Por
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 50%;">
<div class="label">Nombre y Apellido del Supervisor Inmeadiato </div>
</div>
<div class="campo" style="width: 50%;">
<div class="label"> Nombre y Apellido </div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 50%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 50%;">
<div class="label"></div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 50%;">
<div class="label">Cargo</div>
</div>
<div class="campo" style="width: 50%;">
<div class="label">Firma</div>
</div>
</div>
<div class="formbloq">
<div class="campo" style="width: 50%;">
<div class="label"></div>
</div>
<div class="campo" style="width: 50%;">
<div class="label"></div>
</div>
</div>
<div style="display:flex">
<div class="titulo" style="width:33.33%">
Control y Gestion de Calidad
</div>
<div class="titulo" style="width:33.33%">
Departamento de Reservaciones
</div>
<div class="titulo" style="width:33.33%">
Junta Directiva
</div>
</div>
<div style="display:flex">
<div class="sign" style="width:45%; display: flex;flex-direction:column; text-align: left">
Nombre:
</div>
<div class="sign" style="width:30%; display: flex;flex-direction:column; text-align: left">
Fecha:
</div>
<div class="sign" style="width:30%; display: flex;flex-direction:column; text-align: left">
Firma:
</div>
<div class="sign" style="width:45%; display: flex;flex-direction:column; text-align: left">
Nombre:
</div>
<div class="sign" style="width:30%; display: flex;flex-direction:column; text-align: left">
Fecha:
</div>
<div class="sign" style="width:30%; display: flex;flex-direction:column; text-align: left">
Firma:
</div>
<div class="sign" style="width:45%; display: flex;flex-direction:column; text-align: left">
Nombre:
</div>
<div class="sign" style="width:30%; display: flex;flex-direction:column; text-align: left">
Fecha:
</div>
<div class="sign" style="width:30%; display: flex;flex-direction:column; text-align: left">
Firma:
</div>
</div>
</div>
</body>
[Me gustaria saber que esta ocasionando el error de manera que pueda imprimir una planilla pdf，
1个回答
0
投票
投票
“ display：flex”在dompdf库中不受支持
最新问题
- 如何让 StrawberryShake 将 ID 视为数字？
- 我应该将菜单数据存储在数据库中还是在前端进行硬编码以获得更好的可管理性和用户授权？
- jQuery ajax 函数在我的项目中无法正常工作
- 很好地将 .txt 文件转换为 .json 文件
- 如何使用 Redux 将 Next.js 15 中的客户端选项卡组件转换为 SSR？
- Dotnet CLI SonarScanner 在使用 dotnet 8.0 图像时失败
- fastapi和vue集成了stripe支付，我可以放弃stripe元素吗？
- 如何证明顺序命令C1；如果我们知道 C1 总是终止，那么 C2 总是可以执行到 C2？
- SQL 查询出现内嵌错误 - “字段列表”中未知列
- 为什么 R 中的 lp() 线性求解器在给定较小的选项子集时会找到更好的解决方案？ [已关闭]
- 如何用 `io-ts` 表示原生枚举？
- 在bun dev已经运行时运行bun add
- git pull --rebase 失败
- Select2 -- 占位符不显示
- 如何应用 GridSearchCV，其中我的数据是组织到文件夹中的图像？
- Vespa 访问 504 网关超时
- Azure Api 管理限制用户操作级别
- Java中Cron Job第六个参数
- 如何使用 npm create-react-app my-app 在 React 应用程序中使用 Azure 服务总线主题/队列从浏览器（React JS）发送/接收消息
- Azure Cosmos 和 MongoDB 上的 PyMongo
© www.soinside.com 2019 - 2024. All rights reserved.