i am here looking for CSS Footer in HTML table PDF view to to print in IOS device.
I will share below my code, there i can only get the footer end of the table but i want the footer in every page at the end for IOS device.
For My code it's also given me in android the footer at the end of every page.but i am running one of IOS device, so i am expecting in my PDF view to see at the end of every page the footer.
please help me to do it in IOS device. Thanks For Your Trying.
const html = `
<style>
#page {
margin: 0.1cm;
size: landscape;
orientation: landscape;
size: A4;
}
.demo {
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
page-break-inside:auto;
margin-buttom:300px;
table-layout:fixed;
}
.demo tr{
page-break-inside:avoid; page-break-after:auto;
}
.demo th {
border:2px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.demo td {
border:2px solid #C0C0C0;
padding:5px;
text-align: center;
}
.images {
text-align: center;
}
body{
padding-top: 60px;
padding-bottom: 60px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
color: black;
font-weight: bold;
text-align: center;
flex-direction:column;
}
.page-number:after {
counter-increment: pages;
content: counter(page) " of " counter(pages);
}
</style>
<html>
<div class="images">
<img src="https://www.comdelta.com.my/wp-content/uploads/2021/10/Logo.jpeg"
alt="Comdelta Technologies Sdn. Bhd"
width="200" height="100"/>
</div>
<table class="demo">
<h2>Comdelta Technologies Sdn. Bhd</h2>
<thead>
<tr>
<th>Lamp No</th>
<th>Road</th>
</tr>
</thead>
<tbody>
<tr>
<td> ${htmlDataLm[0]}</td>
<td> ${htmlDataR[0]}</td>
<td> ${htmlDataM[0]}</td>
<td> ${htmlDataS[0]}</td>
<td> ${htmlDataL[0]}</td>
<td> ${htmlDataB[0]}</td>
<td> ${htmlDataPG[0]}</td>
<td> ${htmlDataPC[0]}</td>
<td> ${htmlDataUP[0]}</td>
</tr>
<tr>
<td> ${htmlDataLm[1]}</td>
<td> ${htmlDataR[1]}</td>
<td> ${htmlDataM[1]}</td>
<td> ${htmlDataS[1]}</td>
<td> ${htmlDataL[1]}</td>
<td> ${htmlDataB[1]}</td>
<td> ${htmlDataPG[1]}</td>
<td> ${htmlDataPC[1]}</td>
<td> ${htmlDataUP[1]}</td>
</tr>
<tbody>
</table>
<p>
</p>
<div class="footer ">
<span class="page-number">Page </span>
<p>Copyright © 2022 Comdelta Technologies Sdn. Bhd.All rights reserved.</p>
</div >
</html>
`;
const generatePdf = async () => {
const { uri } = await printToFileAsync({
html,
margins: {
left: 20,
top: 20,
right: 20,
bottom: 20
},
});
console.log('File has been saved to:', uri);
await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
}
Related
I am trying to remove the header from only the first page while printing,
or Saving it to PDF
but it's not working
I have tried the below CSS codes but none of theme are working:
I have also visited these link but but none of the answer worked for me
Remove Header from First Page of HTML Generated PDF - CSS
and Delete the footer only on the last page using CSS
#page: first {
#top-left {
content: normal;
}
}
#page :not(:first) {
}
Both of theme didn't worked.
my styles
<style type="text/css">
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black;
/* for demo */
background: white;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black;
/* for demo */
background: white;
/* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm;
}
#media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
#page: first {
#top-left {
content: normal;
}
}
.main_paragraph {
white-space: pre-line;
white-space: pre-wrap;
line-height: 25px;
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
text-indent: 30px;
text-align: justify
}
</style>
my Body
<body>
<div class="page-header" style="text-align: center">
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div>
<img src="{{URL::asset("img/logo.jpg")}}" style="width: 90%;display: block;margin: 0 auto;z-index: 1;">
</div>
<table id="main_table" dir="rtl"
style="width: 95%;text-align:center; margin: 0 auto;border-collapse: collapse;" border="1">
<tbody>
<tr style="font-size: 18px;font-weight:bold;height:40px">
<td style="width: 47.5%">sugestion</td>
<td style="width: 7%">date</td>
<td style="width: 46.5%">order</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">
{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
{{-- <td>{{strlen($result[0]->document_text)}}
</td> --}}
#if(strlen($result[0]->document_text)<=977) <td style="vertical-align: top;border-top:hidden;height:65vh"
dir="rtl">
#else
<td style="vertical-align: top;border-top:hidden;" dir="rtl">
#endif
{{$result[0]->document_text}}
<p class="main_paragraph" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="page-footer" style="text-align: center;width:94.5%;margin-left:2.55%">
</div>
</body>
I'm testing it on chrome.
You can use media query in CSS to fix that
media query is used to hide an element when printing web pages. Use #media print query and set the display none or visibility hidden to that element that needs to hide at printing
like this
#media print{
.page-header{
display:none;
}
}
if this doesn't work with you try to add media = print link on an HTML page
like this
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
If still doesn't work try to add CSS code to the HTML page
Like This
<style>
#media print{
.page-header{
display:none;
}
}
</style>
try to do it with Laravel
<div class="header
#if(Route::currentRouteName() === 'yourPage')
{{hied-in-print}}
#endif "></div>
and use this class hied-in-print in #media print
<style>
#media print{
.hied-in-print{
display:none;
}
}
</style>
I have a textarea in the td cell of each row in column 3, to hold description specific to each row.
When the user clicks on the td, the current description in the textarea inside the td should be copied over to the textarea inside #div_toggle
Here is what I am trying to accomplish.
The user would make changes to the description in #div_toggle, and when done, will click 'X' to close the div. This should cause the contents to be transferred from the textarea in #div_toggle to the td cell textarea.
Would you be able to help me achieve this goal? Or am I complicating this? Is there a better approach?
Below is the code I have thus far, but it does not work as desired or described above. Please help.
Best regards.
<!DOCTYPE html>
<html>
<head>
<style>
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
var tbl = $('#itemtable');
var rows = $('tr', tbl);
//get toggle div text area contents into td cell textarea
rows.eq(clickedrowindex).find('td:nth-child(3)').text() = $('#div_toggle textarea#notescopy').val();
$('#div_toggle').slideToggle('slow');
});
var clickedrowindex;
$('#itemtable').find('tr').click( function(){
clickedrowindex = $(this).closest('tr').index();
//get td cell textarea contents into the toggle div text area
var notestext = $(this).find('td:nth-child(3)').text();
$('#div_toggle textarea#notescopy').val(notestext);
});
});
</script>
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
You do not need that much of code and its can simplified to just two functions to achieve your desired results.
Firstly, we just need to make sure that we save the our current target (td > textarea) in variable and use that variable to assign val to the textarea accordingly.
Also, we need to use a class .div_toggle selector not an id #div_toggle - Since id will only pick the element which is found firstly but in our case we need to change value dynamically on each slideDown and SlideUp event.
Lastly, for this you need to use slideDown and slideUp on X button click. Its work the same way as slideToggle. Using slideToggle will create a weird behaviour.
When you click the X the content you typed in the toggle div textarea will be transfered to the td you clicked on as your target
Live Working Demo:
$(document).ready(function() {
let currentTar; //save current target
let divToggle = $('.div_toggle') //get element
//Show textarea
$('.cell_id').click(function(event) {
currentTar = event.currentTarget
divToggle.slideDown('slow');
let getText = $(this).find('textarea').val()
divToggle.find('textarea').val(getText)
});
//Close textarea
$('#close_text').click(function() {
divToggle.slideUp('slow');
let assignVal = divToggle.find('textarea').val();
$(currentTar).find('textarea').val(assignVal)
});
});
th,
td {
border: solid 1px lightgrey;
}
.div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
.div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'>Test</textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'>Foo</textarea></td>
</tr>
<tr>
<td> 2040</td>
<td> Elon Musk</td>
<td class='cell_id'><textarea name='reqnotes'>Tesla</textarea>
</td>
</tr>
</tbody>
</table>
<div class="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
A few minor changes. Utilize $(this).val() instead of doing a find for the closest :)
You'll notice the code is much cleaner as well.
$(document).ready(function() {
$("textarea").click(function(){
var contents = $(this).val();
$('#notescopy').val(contents);
});
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
$('#div_toggle').slideToggle('slow');
});
});
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
I want to print an HTML page with the page numbers on each page. My HTML consists of a table with rows of varying sizes. So I can not tell when a page-break will occur. I just used "page-break-inside: avoid;" in the row cause I don't want to break inside the row.
I tried using #page attribute but its not working.
#page {
size: A4 portrait;
margin: 11mm 17mm 17mm 17mm;
counter-increment: page;
#bottom-left {
content: counter(page);
}
}
#page:first {
counter-reset: page 1;
}
I tried using after footer or header but doesn't work either. The thead appears to print on each page but just count once. So I can't use it as counter-increment. Stays always as Page 1. The same for the footer.
My problem is where to put the counter-increment. I don't have a specific element to control the page-breaks.
HTML:
<table>
<thead>
<tr>
<td>
<div class="header-space">
<%-- header code --%>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="content">
<div class="content-block">
<p>
<asp:Repeater ID="rptTeste" runat="server" OnItemDataBound="rptTeste_ItemDataBound">
<ItemTemplate>
<div id="divQuestao">
<%-- rows of variate sizes code --%>
</div>
</ItemTemplate>
</asp:Repeater>
</p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="footer-space">
<%-- footer code --%>
</div>
</td>
</tr>
</tfoot>
</table>
CSS:
#media print {
#page {
size: A4 portrait;
margin: 11mm 17mm 17mm 17mm;
}
body {
float: none;
margin-left: 0;
margin-top: 0;
counter-reset: page;
}
.header-space,
.footer-space {
height: 150px;
}
.footer-space::after {
top: 0px; position: relative;
white-space: nowrap;
z-index: 20; width:100%; margin:0 auto; text-align:center;
counter-increment: page;
content:"Page " counter(page);
}
#divQuestao {
page-break-inside: avoid;
padding-top: 30px;
text-align: justify;
}
}
It suppossed to be so easy to show the page number when printing! But it's not!!
I try to use counter(page) inside my HTML report but without success.
I read many StackOverflow pages about this topics but I never found working solution !
Environment
Chrome (latest version: 70.0.3538.110)
Firefox (latest version: 63.0.3)
Workflow
Copy the code into HTML page
Open it with Chrome/Firefox
Print it
Inside preview, number is not properly computed
Questions ?
Do you have solution about this topics (if possible just with HTML/CSS) ?
Current CSS3 standard is not supported by the major browsers in 2018 ?
Maybe thead / pageBreak combo is not perfectly supported ?
Thanks !
PS: Please publish entire solution (not a partial HTML/CSS code) !
My HTML demo
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML CSS Page counter</title>
<style>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
#media print{
#page {
size: A4 portrait;
}
.pageBreak {
page-break-before: always;
}
span.page-number:after {
content: "Page " counter(page);
}
}
#media screen{
span.page-number:after {
content: "All pages";
}
}
</style>
</head>
<body>
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
<table border="1" width="100%">
<tr height="100px">
<td align="center" valign="middle">Header title</td>
<td><span class="page-number"></td>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
<table border="1" width="100%">
<tr height="50px">
<td><p>Other info</p></td>
</tr>
</table>
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
First page with some data.
<div class="pageBreak"></div>
Second page with some data.
<div class="pageBreak"></div>
Third page with some data.
<div class="pageBreak"></div>
Fourth page with some data.
<div class="pageBreak"></div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Not all browsers support content:counter(page); So far the only one I've found that does is Firefox. But it doesn't work with your code example because you're using tables. Specifically, page-break-before does not (is not supposed to) work within a table. Chrome lets you, but Firefox doesn't.
For demonstration purposes I've tried to recreate your table in css and paginate the results.
You'll need to copy the results into a new .html file to test.
body {
width: 300px;
}
#header {
border: 1px solid;
overflow: hidden;
}
#header>div {
float: left;
width: 50%;
line-height: 100px;
text-align: center;
}
#foot {
border: 1px solid;
}
#header p {
margin: 0;
}
#header #page-number {
border-left: 1px solid;
width: calc(50% - 1px);
}
#page-number:after {
content: "All pages";
}
#media print {
.pageBreak {
page-break-before: always;
padding-bottom: 120px;
}
#content {
padding-top: 120px;
}
#header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
}
#page-number:after {
content: "Page " counter(page);
counter-increment: page;
}
#foot {
display: block;
position: fixed;
bottom: 0pt;
}
}
<div id="header">
<div id="header-title">
<p>Header title</p>
</div>
<div id="page-number"></div>
</div>
<div id="content">
First page with some data.
<div class="pageBreak"></div>
Second page with some data.
<div class="pageBreak"></div>
Third page with some data.
<div class="pageBreak"></div>
Fourth page with some data.
<div class="pageBreak"></div>
</div>
<div id="foot">
Other info.
</div>
I am trying to implement a PDF generator for my iOS application from a HTML-CSS template.
It successfully generates it, although for some reason, it doesn't cut properly at the end of the page properly. Screenshot from PDF export
I already tried;
page-break
#media print
My PrintRenderer Swift class is;
class CustomPrintPageRenderer: UIPrintPageRenderer {
let A4PageWidth: CGFloat = 595.2
let A4PageHeight: CGFloat = 841.8
override init() {
super.init()
let pageFrame = CGRect(x: 0.0, y: 0.0, width: A4PageWidth, height: A4PageHeight)
self.setValue(NSValue(cgRect: pageFrame), forKey: "paperRect")
self.setValue(NSValue(cgRect: pageFrame.insetBy(dx: 10, dy: 10)), forKey: "printableRect")
}
}
And my HTML template file's media-print section is;
#media print {
height: auto;
#skills {
padding-top: 5mm;
display: block;
page-break-before: auto;
page-break-inside: avoid;
page-break-after: auto;
background-color: red;
}
#lesson {
height: 100%;
display: block;
page-break-before: avoid;
page-break-inside: always;
page-break-after: auto;
border-top: none;
background-color: green;
}
#drivingTests {
display: block;
page-break-before: auto;
page-break-inside: auto;
page-break-after: avoid;
border-top: none;
background-color: yellow;
}
.wrapTable:not(.innerWrapTable) {
display: block;
page-break-before: auto;
page-break-inside: auto;
page-break-after: auto;
}
}
Body of the HTML template file is;
<body>
<div id="contentWrap">
<!-- Header -->
<header>
<table>
<tr>
<td>
<table>
<tr>
<td>
<p>Ausbildungskarte</p>
</td>
<td>
<p>Kat. #category#</p>
</td>
</tr>
</table>
</td>
<td>#headerLogo#</td>
</tr>
</table>
</header>
<!-- Personal Information -->
<table id="personalInformation" class="wrapTable">
<tr>
<th class="headers">Persönliche Informationen</th>
</tr>
#personalInformationItems#
</table>
<!-- Skills -->
<table id="skills" class="wrapTable">
<tr>
<th class="headers">Skills</th>
</tr>
<tr>
<td>
<table class="wrapTable innerWrapTable">
<tr>
<td class="skillColumnItem">#skillSectionLeftItem#</td>
<td class="skillColumnItem">#skillSectionMiddleItem#</td>
<td class="skillColumnItem">#skillSectionRightItem#</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Lesson -->
<table id="lesson" class="wrapTable">
<tr>
<th class="headers">Lessons</th>
</tr>
#lessonItems#
</table>
<!-- Driving Tests -->
<table id="drivingTests" class="wrapTable">
<tr>
<th class="headers">Driving Tests</th>
</tr>
#drivingTestItems#
</table>
</div>
</body>
If necessary, I can share the full HTML file, which is around 300 lines.
Any advice or error correction is appreciated.