Share
ReportHi,
I want to convert a HTML to PDF,
I'm using "create file" on One Drive to create new file .HTML
then I'm trying convert it to .PDF by "convert file "on One Drive.
when I execute it, HTML file's created as I want. but pdf file doesn't look as expected.
This is html file after converting:
and this's pdf file
Here's my flow:
and this's my html script:
<!DOCTYPE html>
<html>
<head>
<title>Service Report</title>
<style type="text/css">
body{
width: 60%;
margin: auto;
padding: 10px;
border-style:outset;
}
.header{
width: 90%;
text-align: center;
margin: auto;
}
.footer{
width: 90%;
margin: auto;
}
.tbHeader td{
text-align: left;
}
#report{
width: 90%;
margin: auto;
border-collapse: collapse;
overflow: auto;
table-layout: fixed;
}
.title{
text-align: center;
width: 10px;
background-color: #00968861;
}
#report td, th {
border: 1px solid;
border-color: rgb(0,0,0);
padding: 8px;
}
#report td{
width:20px;
overflow: hidden;
word-wrap:break-word;
}
table div{
border: 1px solid;
border-color: black;
padding: 0px;
margin: 0px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="header">
<table class="tbHeader" style="width: 100%;table-layout: fixed;">
<tr>
<td><span><img width="50%" height="50%" src="#"></span></td>
<td colspan="3">
<h2> SERVICE REPORT </h2>
</td>
</tr>
<tr>
<td>Service Report No.:</td>
<td>Test abcadajsdkajdaj</td>
<td>Test Date:</td>
<td>28-02-2021</td>
</tr>
</table>
<div><hr></div>
</div>
<div class="body-report">
<table id="report">
<tr>
<td class="title" style="width: 5px">Customer: </td>
<td class="content" colspan="4" style="width: 50px"></td>
<td class="title">Telephone: </td>
<td class="content">Testttttttttttttttttttttttttttt</td>
</tr>
<tr>
<td class="title">Address: </td>
<td class="content" colspan="4"></td>
<td class="title">Requested by:</td>
<td class="content">Testttttttttttttttttttttttttttt</td>
</tr>
<tr>
<td class="title" rowspan="2">Time: </td>
<td class="title">Departure</td>
<td class="title">Start</td>
<td class="title">Finish</td>
<td class="title">Return</td>
<td class="title" colspan="2">Service Category</td>
</tr>
<tr>
<td class="content">Test </td>
<td class="content">123</td>
<td class="content">1455</td>
<td class="content">6442</td>
<td class="content" style="min-height: 50px">
<input type="checkbox" id="project based" name="project based" value="project based" style="float: left;">
<label for="project based">Installation/Setup (Project based)</label><br>
</td>
<td class="content">
<input type="checkbox" id="spot services" name="spot services" value="spot services" style="float: left;">
<label for="spot services">Installation/Setup (<b>Spot services</b>)</label><br>
</td>
</tr>
<tr>
<td class="title">Working Hours:</td>
<td class="content">50 Hour(s)</td>
<td class="title" colspan="2">Transportation:</td>
<td class="content">1 Hour(s)</td>
<td class="content" style="min-height: 50px">
<input type="checkbox" id="project based" name="project based" value="project based" style="float: left;">
<label for="project based">Troubleshoot/Repair (under contract scope)</label>
</td>
<td class="content">
<input type="checkbox" id="out of contract" name="out of contract" value="out of contract" style="float: left;">
<label for="out of contract">Troubleshoot/Repair (<b>Spot or out of contract</b>)</label>
</td>
</tr>
<tr>
<td class="title">Maintenance: </td>
<td class="content" colspan="4">
<div style="display: flex;justify-content: space-between;border: 0px">
<div style="border: 0px">
<input type="checkbox" id="maintenance-contract-yes" value="Yes" style="float: left;">
<label for="maintenance-contract-yes">Yes</label>
</div>
<div style="border: 0px">
<input type="checkbox" id="maintenance-contract-no" value="No" style="float: left;">
<label for="maintenance-contract-no">No</label>
</div>
<div style="border: 0px">
<input type="checkbox" id="maintenance-contract-other" value="Other" style="float: left;">
<label for="maintenance-contract-other">Others()</label>
</div>
</div>
</td>
<td class="content" style="height: 50px">
<input type="checkbox" id="regular maintenance" value="regular maintenance" style="float: left;">
<label for="regular maintenance">Regular Maintenance (under contract)</label>
</td>
<td class="content">
<input type="checkbox" id="relocation-removal" value="Relocation/Removal" style="float: left;">
<label for="relocation-removal">Relocation/Removal (under contract)</label>
</td>
</tr>
<tr>
<td class="title">Reference No.: </td>
<td class="content" colspan="4"></td>
<td class="content" style="height: 50px">
<input type="checkbox" id="warrantly" value="Warrantly" style="float: left;">
<label for="warrantly">Warrantly (please specify)</label>
</td>
<td class="content">
<input type="checkbox" id="others" value="Others" style="float: left;">
<label for="others">Others (please specify)</label>
</td>
</tr>
<tr>
<td class="title">Contents: </td>
<td class="content" colspan="6"></td>
</tr>
<tr>
<td class="content-area" colspan="7" style="height: 400px"></td>
</tr>
<tr>
<td class="title">Result: </td>
<td class="content" colspan="6"></td>
</tr>
<tr>
<td class="title">Collection for repair: </td>
<td class="content" colspan="6"></td>
</tr>
<tr>
<td class="title">Details of collection items:</td>
<td class="content" colspan="6"></td>
</tr>
<tr>
<td colspan="7" style="padding: 0px;">
<div style="display: flex;justify-content: space-between;border: 1px">
<div class="title" style="width: 15%;text-align: center;">
Customer Name & Signature:
</div>
<div style="width: 35%"><img width="100px" height="100px" src="#" alt="Signature1"/>
</div>
<div class="title" style="width: 15%;text-align: center;">
KVN PIC Name & Signature:
</div>
<div style="width: 35%"><img width="100px" height="100px" src="#" alt="Signature2"/>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Have anyone can help me, please.
Thanks in advance.
Categories:
All responses (
Answers (
424
