You’re offline. This is a read only version of the page.
8
Hello everyone,
I've been searching everywhere and I'm having trouble finding a solution to the problem I'm having trying to convert HTML to a PDF. I'm using the techniques that Shane Young uses in this youtube video. I'm trying to build a power app that will take a user's input and put those into an excel table and also into HTML code that is then converted to a PDF. I've formatted the HTML file to represent a paper ticket to ease the transition. Everything seems to work fine but my containers don't seem to format correctly. I'm a bit of a noob when it comes to HTML and there's something I'm missing going from HTML to PDF. I've attached the pdf file that is generated from the HTML code. I'll include the HTML code below. Could anyone help me?
Here's the HTML code (sorry I know the in-line styling is gross, I just saw a post saying that in-line is best for this type of conversion):
Share
Report<!DOCTYPE html>
<html>
<style>
.tab{
display: inline-block;
margin-left: 20%
}
.smalltab{
display: inline-block;
margin-left: 5%
}
.largetab{
display: inline-block;
margin-left: 35%;
}
</style>
<head>
<h2 style="
text-align: center;
font-size: 16px;">
Name of My Company
</h2>
<h3 style="
text-align:center;
font-size:12px;
">
My Company's Address <br>
(123) 456-7890<br>
Transportation Services Receipt
</h3>
</head>
<body>
<div style ="float:left;
width:50%;
font-size:12px;
height:80px;
text-align:left;
box-sizing:border-box;
position: absolute;
top: 150px;
left: 20px">
Job #: <span class="tab"></span> 12345
<hr style="width:25%;text-align:left;margin-left:20%">
Date: <span class="tab"></span> 10/14/20
<hr style="width:25%;text-align:left;margin-left:20%">
</div>
<div style = "float:left;
width:50%;
font-size:12px;
height:80px;
text-align:left;
position: absolute;
top: 150px;
left: 800px;">
Contact: <span class="tab"></span>
<hr style="width:30%;text-align:left;margin-left:20%">
P.O. #: <span class="tab"></span>
<hr style="width:30%;text-align:left;margin-left:20%">
</div>
<h3 style="float:left;
text-align:left;
font-size:12px;">
Sold To:
</h3>
<h3 style="float:left;
text-align:left;
margin-left: 160
font-size:12px;
height:20px;
width:50%;
position: absolute;
top: 190px;
left: 800px">
Job Site:
</h3>
<div style="float:left;
width:50%;
font-size:12px;
height:150px;
text-align:center;
position: absolute;
top: 250px;
left: 20px">
Company Name
<hr style="width:50%;text-align:left;margin-left:25%">
Company Address
<hr style="width:50%;text-align:left;margin-left:25%">
Company City, State, Zip Code
<hr style="width:50%;text-align:left;margin-left:25%">
</div>
<div style="float:left;
width:50%;
font-size:12px;
height:150px;
text-align:center;
position: absolute;
top: 250px;
left: 800px;">
Company Name
<hr style="width:65%;text-align:left;margin-left:20%">
Company Address
<hr style="width:65%;text-align:left;margin-left:20%">
Company City, State, Zip Code
<hr style="width:65%;text-align:left;margin-left:20%">
</div>
<div style="float:left;
width:20%;
font-size:12px;
height:150px;
text-align:left;
position: absolute;
top: 400px;
left: 20px">
Time left office: <br><br>
Time arrived job site: <br><br>
Time left job site: <br><br>
Time arrived disposal site: <br><br>
Time left disposal site: <br><br>
Time returned to work: <br><br>
</div>
<div style="
float:left;
width:400px;
font-size:12px;
height:150px;
text-align:left;
position: absolute;
top: 400px;
left: 200px;">
<span class="tab"></span>8:20
<hr class="timehr">
<span class="tab"></span>10:50
<hr class="timehr">
<span class="tab"></span>11:30
<hr class="timehr">
<span class="tab"></span>12:45
<hr class="timehr">
<span class="tab"></span>16:25
<hr class="timehr">
<span class="tab"></span>18:35
<hr class="timehr">
</div>
<div style="
float:left;
width:15%;
font-size:12px;
height:150px;
text-align:left;
position: absolute;
top: 400px;
left: 800px;">
Driver: <br><br>
Supervisor: <br><br>
Helper: <br><br>
Truck #: <br><br>
Total Gallons: <br><br>
Disposal Site: <br><br>
</div>
<div style="float:left;
width:35%;
font-size:12px;
height:260px;
text-align:left;
position: absolute;
top: 400px;
left: 1000px;">
<span class="smalltab"></span>Driver
<hr style="width:70%;text-align:center; margin-left:0%;">
<span class="smalltab"></span>Supervisor
<hr style="width:70%;text-align:center; margin-left:0%;">
<span class="smalltab"></span>Helper
<hr style="width:70%;text-align:center; margin-left:0%;">
<span class="smalltab"></span>Truck
<hr style="width:70%;text-align:center; margin-left:0%;">
<span class="smalltab"></span>Total Gallons:
<hr style="width:70%;text-align:center; margin-left:0%;">
<span class="smalltab"></span>Disposal Site
<hr style="width:70%;text-align:center; margin-left:0%;">
</div>
<div style="font-size: 12px;
height: 150px;
text-align: left;
width: 100%;
position: absolute;
top: 700px;">
<strong>Description:</strong> <span class="smalltab"></span>
<hr>
</div>
</body>
</html>
It doesn't do a great a job of converting. You can hit and trial with table tags.
All responses (
Answers (
