wkhtmltopdf 转换：HTML 表格不适合 A4
问题描述 投票：0回答：2
我创建了一个基本的 PHP 网页来生成公司员工每月工作时间的时间表。表中的工作时间和其他详细信息将通过 API 以 JSON 格式输入 PHP 变量，这些变量现在设置为虚拟关联数组，其中包含一些随机数据（我认为这与问题无关，就这些了）。
我使用名为 Layoutit 的有用工具设计了布局：https://www.layoutit.com/build
我当前正在处理的 PHP 页面稍后将嵌入另一个 HTML 页面中，并且将有一个按钮，可以使用名为 wkhtmltopdf 的命令行实用程序将其转换为 PDF。到目前为止一切顺利，我有一个可用的 PHP 文件，其中包含生成表的 foreach 循环。使用此命令
wkhtmltopdf http://192.168.64.2/empl_timesheet.php empl_timesheet.pdf我知道我的代码片段不会在 StackOverflow 代码片段查看器上正确显示，因为它包含一些 PHP，因此如果您想重现该行为，最好克隆存储库或复制文件内容并运行它们位于 XAMP 或类似服务器上。我是用 XAMP 做的。
* {
font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}
div {
line-height: 0px;
}
/* @page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
}
@media print {
body{
line-height: 0px;
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
background:#f1f2f2;
}
} */
.thetable, .company_header, .signaturearea {
border: 1px solid #323232;
border-radius: 1px 1px 1px 1px;
}
.companyname, .timesheet, .dnplaceholder {
padding-left: 3.5em;
padding-right: 3.5em;
padding-top: 20%;
float: left;
}
.l {
padding: 2em;
margin: 2em;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"company_header company_header company_header"
"thetable thetable thetable"
"signaturearea signaturearea signaturearea";
}
.company_header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". companyname ."
". timesheet ."
"dnplaceholder dnplaceholder .";
grid-area: company_header;
}
.companyname {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". . ."
". . ."
"companyname companyname companyname";
grid-area: companyname;
}
.companyname {
grid-area: companyname;
}
.timesheet { grid-area: timesheet; }
.dnplaceholder {
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". date ."
". name ."
". . .";
grid-area: dnplaceholder;
}
.name {
grid-area: name;
}
.date {
grid-area: date;
}
.thetable {
grid-area: thetable;
overflow: auto;
padding: 10%;
}
table {
width: inherit;
}
.signaturearea {
display: grid;
grid-template-columns:0.5fr 0.8fr 1fr;
grid-template-rows:0.2fr 0.2fr 0.2fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". . ."
". employeesignature ."
". . .";
grid-area: signaturearea;
}
.employeesignature {
grid-area: employeesignature;
display: inline-block;
}
/*
CUSTOM CSS TABLE
ref link: https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l
*/
.thetable {
border-collapse: collapse;
font-size: 100%;
font-family: sans-serif;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
text-align: center;
}
.thetable thead tr {
background-color: #b9b9b9;
color: #ffffff;
border-bottom: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
}
.thetable th,
.thetable td {
padding: 12px 15px;
border-bottom: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
}
.thetable tbody tr {
border-bottom: 1px solid #dddddd;
border-bottom: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
}
.thetable tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
border-bottom: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
}
.thetable tbody tr:last-of-type {
border-bottom: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
}
/*.sum {
color: #009879;
}
*/
#jumbotron {
padding: 6em;
margin: 6em;
box-shadow: 1px #b1b1b1;
box-shadow: rgb(161, 161, 161) 5px 5px 15px 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>timesheet</title>
<meta name="description" content="Source code by Svetlin I.">
<meta name="author" content="Svetlin!">
<!-- <link rel="stylesheet" href="stdz_style.css"> -->
<link rel="stylesheet" href="corner.css">
<link rel="stylesheet" href="timesheet_style.css?v=<?php echo time(); ?>">
</head>
<body>
<!-- JUMBO with shadows -->
<div id="jumbotron">
<!-- .l -->
<div class="l">
<div class="company_header">
<div class="companyname">
<h3>
<!-- Company Name Ltd. -->
</h3>
</div>
<div class="timesheet">
<h4>
Work Hours Timesheet
</h4>
</div>
<div class="dnplaceholder">
<div class="date">
Month: Feb 22
</div>
<div class="name">
Name: Mad Max
</div>
</div>
</div>
<!-- TABLE STYLED WITH CSS -->
<div class="thetable">
<?php
$data = array();
$companyLogo = "https//www.companylogo.xyz/logo";
$month = "February 23";
$name = "Mad Max";
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "06:30", "workEnd" => "15:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "05.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:30", "workEnd" => "16:15", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "06.02.2022", "remark" => "empty"];
$data[] = ["workStart" => "07:00", "workEnd" => "15:45", "breaks" => "0:45", "actualWorkHours" => "08,00", "placeholder" => "empty", "sick" => "empty", "vaccation" => "empty", "holiday" => "empty", "recordedOn" => "04.02.2022", "remark" => "empty"];
$dataHeader["day"] = "Day";
$dataHeader["workStart"] = "Work start";
$dataHeader["workEnd"] = "Work end";
$dataHeader["breaks"] = "Pause";
$dataHeader["actualWorkHours"] = "Actual Workhours";
$dataHeader["placeholder"] = "Placeholder";
$dataHeader["sick"] = "Sick Leave";
$dataHeader["vaccation"] = "Vaccation";
$dataHeader["holiday"] = "Holiday";
$dataHeader["recordedOn"] = "Recorded on:";
$dataHeader["remark"] = "Remark:";
$listKeys = ["day", "workStart", "workEnd", "breaks", "actualWorkHours", "placeholder", "sick", "vaccation", "holiday", "recordedOn", "remark"];
?>
<div>
<table>
<thead>
<tr>
<?php
foreach($dataHeader as $x => $x_value) {
echo "<th>" . $x_value . "</th>";
}
?>
</tr>
</thead>
<tbody>
<?php
$endday = 31;
$currentDay = 1;
foreach($data as $key=>$row) {
echo "<tr>";
echo "<td>" . $currentDay . "</td>";
foreach($row as $key2=>$row2){
echo "<td>" . $row2 . "</td>";
}
echo "</tr>";
$currentDay += 1;
}
?>
</tbody>
</table>
</div>
</div>
<!-- END TABLE STYLED WITH CSS -->
<!-- EMPLOYEE SIGNATURE -->
<div class="signaturearea">
<div class="employeesignature">
<p>Employee Signature:</p>
<p><br/><br/><br/></p>
<p><br/><br/><br/></p>
<p>__________________________</p>
</div>
</div>
<!-- END EMPLOYEE SIGNATURE -->
</div>
<!-- END .l -->
<!-- END JUMBOTRON with shadows -->
</div>
</body>
</html>我的问题是，在使用 wkhtmltopdf 生成 PDF 时，避免这种意外行为（溢出 div 和段落）的正确方法是什么？我指的是下面的屏幕截图，它显示了 wkhtmltopdf 为我生成的内容。如图所示，桌子的一半被切断了。
我阅读了 Stack 上的大量文章，我在这里列出了其中一些文章：
这里看不到代码片段，也没有提到修复： wkhtmltopdf -> A4 中的 FIT Html 表格问题 (C#)
我似乎遇到了与 Pankaj Pawar 在这里描述的不必要的空格完全相反的问题： wkhtmltopdf |嵌套表格 HTML 到 PDF |空格问题
对我来说，问题是缺乏空间来容纳表格，因此欢迎任何关于如何缩小我所谓的大屏幕 div 以便足以正确打印表格的建议。
Mert 在评论说他缺少对所需行为的解释后编辑了他的问题，但目前还没有答案： wkhtmltopdf html表格侧线
这不完全是我的情况，因为我已经可以将其转换为 A4，只是我的布局不会像 HTML 格式一样： 将 html 转换为 a4 尺寸的 pdf wkhtmltopdf
因此，为了清楚地表明所需的行为，我提供了打印文档的屏幕截图，我的目标是使我的网页尽可能接近，并使用 Google Lens 进行翻译。
我浏览过的其他 StackOverflow 文章主要是关于版本相关的问题，所以仍然没有找到适合我的解决方案。
我尝试过但对我不起作用的其他方法是将页面大小设置为 A4 格式的大小：
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
}
@media print {
body{
line-height: 0px;
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
background:#f1f2f2;
}
您在此处看到的我的代码片段也可以在我的 GitHub 个人资料中找到。
2个回答
3
投票
投票
在尝试调整页面大小以适合 A4 页面时，无所不在的基本功能是所谓的“缩小以适合”。我在 wkhtmltopdf 文档中找不到这一点，但我们的 StackOverflow 用户 Etienne Gautier 描述了一种非常巧妙的方法来实现这一点，即通过在本主题这里下使用 wkhtmltopdf 命令行调整布局大小来实现此目的。
wkhtmltopdf --zoom 0.7 --margin-bottom "3mm" -- margin-top "3mm" --margin-left "3mm" --margin-right "3mm" http://path/to/your_php_file.php /path/to/your/pdf_output_file.pdf
我想知道为什么他没有将其格式化为答案而不是评论。尽管如此，这个问题应该放在不同的线程中，因为它还提出了一个关于想要使用 wkhtmltopdf 转换的页面的 CSS 的问题。就溢出的 div 而言，这似乎是样式本身的问题。我的意思是你必须找到一种方法来动态调整合并的 div 的大小。如果只是重新调整桌子，有一种稍微违反直觉的方法，可以使用 table-layout:fixed;
table {
table-layout: fixed;
width: 100%;
}
谁会想到“固定”在这种情况下意味着什么。如果您只是在寻找一种打印页面的方法，以便其正确地适合页面而不需要对 CSS 进行任何更正，那么我提到的命令行应该可以为您完成这项工作。
0
投票
投票
我们在服务器之间迁移的过程中从 0.12.4 升级到 0.12.6，然后遇到了非常不可预测的调整大小问题。 pdf文件太大了。
我们没有找到解决方案并恢复到0.12.4。
有些事情发生了变化。
最新问题
- 如何使用 HtmlService 创建进度旋转器？
- 在 Flutter 中使用链接形状创建图形
- create-react-app 不起作用“未提供模板”
- 在 Google 脚本中显示进度
- 在与移动设备上的可滚动区域交互之前滚动浏览器地址栏
- 如何设置java spring boot应用程序以将消息发送到Azure服务总线主题
- 如何对齐文本和图像，使其看起来像下面所示和链接的参考图像？
- @angular/core 更新期间出错：不兼容的对等依赖项
- 将两个 Terraform 输出地图合并为一个（逐行）
- Golang ReadWriteCloser 作为 io.File
- 如何制作Microsoft Word模板检查器网站
- 尝试让Python以这种形式打印出正确的出生年份
- 光标删除字符 - Spyder 程序
- 没有背景/边框的图像按钮？ [已解决]
- 如何对齐文本和图像以使其看起来像下面链接的参考图像？
- 导入错误：无法从“pymatgen”（未知位置）导入名称“分子”
- 有php cdn吗？ [已关闭]
- 使用 RTK 查询拦截中间件不起作用
- 错误：无法监控可用交换空间
- 模糊其背后有内容的 HTML 元素的背景
© www.soinside.com 2019 - 2024. All rights reserved.