使用 dompdf 或 tcpd 将 html/css 代码渲染为 pdf 时出错
[英]Error when rendering html/css code to pdf with dompdf or tcpd
问题描述
By entering the html / css code to the function of dompdf, this prints a wrong pdf, where all the text is overwritten on the same line and makes nonsense page breaks
通过在dompdf的函数中输入html/css代码，这会打印出错误的pdf，其中所有文本都在同一行上被覆盖，并进行无意义的分页
I tried to print the same html with tcpdf and other applications without getting the expected results, all the words are always rendered in the same line, and the css is not shown我试图用 tcpdf 和其他应用程序打印相同的 html 没有得到预期的结果，所有的单词总是在同一行中呈现，并且没有显示 css
This is the the c ode html of what i want to print in pdf这是我想以 pdf 格式打印的代码 html
This is my file controller to print the PDF这是我打印 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();
}
This is the html code of the spreadsheet that I want to process in a pdf, this information must be dynamic since it will feed from the database这是我想在 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, Me gustaria saber que esta ocasionando el error de manera que pueda imprimir una planilla pdf,
1 个解决方案
解决方案1
0 2020-02-19 18:45:23
dompdf 库中不支持“显示：flex”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当 HTML 代码转换为 pdf 文件时 Dompdf 表格边框问题 - Dompdf table border issue when HTML code converted to pdf file
Dompdf无法在PDF中呈现INR符号 - Dompdf not rendering INR symbol in PDF
使用dompdf将HTML转换为PDF - HTML to PDF using dompdf
domPDF背景图像未在PDF中呈现 - domPDF background image is not rendering in the PDF
HTML到PDF转换器dompdf - HTML To PDF Converter dompdf
Laravel：尝试获取 PDF 时出现 DOMPDF 错误 - Laravel: DOMPDF error when trying to get PDF
替代dompdf（PHP工具将HTML + CSS转换为PDF）但是在.NET中？ - Alternative to dompdf (PHP Tool To Cnvert HTML+CSS To PDF) But in .NET?
PHP - HTML 和 CSS3 到 PDF（和 mPDF VS DOMpdf） - PHP - HTML and CSS3 to PDF (and mPDF VS DOMpdf)
如何使用 css DomPDF 从 page.html 导出 PDF - How to export PDF from page.html with css DomPDF
为什么 barryvdh/laravel-dompdf 在使用 @font-face CSS 时卡住或无法将 HTML 处理为 PDF？ - Why barryvdh/laravel-dompdf Stuck or won't process HTML to PDF when using @font-face CSS?
相关标签