How to fit a wide table using jspdf, jspdf-autotable - jspdf

I'm using jspdf with the plugin jspdf-autotable to create a pdf for a very wide table, is there a way to auto fit the table/column data to any page size?
I tried the code below with overflow: 'linebreak' but it breaks the words halfway not at the empty space
function demoPDF() {
var pdfsize = 'a0';
var pdf = new jsPDF('l', 'pt', pdfsize);
var res = pdf.autoTableHtmlToJson(document.getElementById("rpt_tbl"));
pdf.autoTable(res.columns, res.data, {
startY: 60,
tableWidth: 'auto',
columnWidth: 'auto',
styles: {
overflow: 'linebreak'
}
});
pdf.save(pdfsize + ".pdf");
};

I'm not completely sure I understood your question, but if you want some columns to simply wrap the content and some to linebreak you can to like this.
function demoPDF() {
var pdfsize = 'a0';
var pdf = new jsPDF('l', 'pt', pdfsize);
pdf.autoTable({
html: '#table',
startY: 60,
styles: {
fontSize: 50,
cellWidth: 'wrap'
},
columnStyles: {
1: {columnWidth: 'auto'}
}
});
pdf.save(pdfsize + ".pdf");
};
demoPDF();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<table id="table" style="display: none;">
<thead>
<tr>
<th title="Field #1">ID</th>
<th title="Field #2">First name</th>
<th title="Field #3">Last name</th>
<th title="Field #4">Email</th>
<th title="Field #5">Country</th>
<th title="Field #6">IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0#furl.net</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice</td>
<td>Henry</td>
<td>jhenry1#theatlantic.com</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2#constantcontact.com</td>
<td>Trinidad</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td align="right">4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3#psu.edu</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4#go.com</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5#com.com</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>

Related

Why is <tfoot> only shows in the last page when printing?

I am trying to print a html using dompdf and I am trying to add a footer but the footer only shows only the last page in print view? Is it a chrome bug?
<table class="table table-bordered" cellspacing="0" style="color:black">
<thead>
<tr>
<th scope="col" style="border-top: color: white; border-left: color: white;border-right: color: white;" colspan="4"> </th>
</tr>
<tr class="text-center">
<th scope="col" class="align-middle" ></th>
<th scope="col" class="align-middle text-nowrap">Reference No.: BatStateU-FO-ESO-01</th>
<th scope="col" class="align-middle text-nowrap">Effectivity Date: January 3, 2017</th>
<th scope="col" class="align-middle text-nowrap">Revision No.: 00</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<p class="title-tab"><input type="checkbox" style=" transform : scale(2);"> Extension Service / Training is requested by clients.</p> <br>
<p class="title-tab"><input type="checkbox" style=" transform : scale(2);" checked> Extension Service / Training is Department’s initiative.</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="4"> </th>
</tr>
</tfoot>
</table>

Is there a way to use jQueryUI sortable on table with hidden columns

Recently I had to fix a strange behaviour on a table which use jQueryUI sortable on rows.
When I drag and move a row, the table is shrinked.
After some research, I was able te reproduce the behaviour on simple table :
jsFiddle link
#sort2 .hidden {
display: none;
}
.fullsize {
width: 100%;
}
.fix30 {
width: 30px;
}
.fix100 {
width: 100px;
}
<html>
<body>
<table id="sort1" class="fullsize">
<thead><tr>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="fix30">Test1</th>
<th>Test2</th>
<th class="fix100">Test3</th>
<th class="fix100">Test4</th>
<th class="fix100">Test5</th>
</tr></thead>
<tbody>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
<hr />
<table id="sort2" class="fullsize">
<thead><tr>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="hidden">hide</th>
<th class="fix30">Test1</th>
<th>Test2</th>
<th class="fix100">Test3</th>
<th class="fix100">Test4</th>
<th class="fix100">Test5</th>
</tr></thead>
<tbody>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td class="hidden">hide</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$("tbody").sortable({
helper: fixHelperModified
}).disableSelection();
My guess, when some columns are hidden, the navigator thinks there is more cols in the row compared to the one in the header.
My question : does anyone had the same issue and how to fix it ?
I was able to fix it by modifying you JS a bit, here is what I did:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).outerWidth($originals.eq(index).outerWidth())
});
return $helper;
};
$("tbody").sortable({
start: function(event, ui) {
ui.helper.css('display', 'table')
},
stop: function(event, ui) {
ui.item.css('display', '')
},
helper: fixHelperModified ,
start: function(event, ui) {
return ui.placeholder.children().each(function(index, child) {
var source;
source = ui.helper.children().eq(index);
$(child).removeAttr('class').removeAttr('colspan');
$(child).addClass(source.attr('class'));
if (source.attr('colspan')) {
return $(child).attr('colspan', source.attr('colspan'));
}
});
}
}).disableSelection();
this problem happens because you have a hidden cell (and in the placeholder that the sortable creates for you there are 8 cells and non of them are hidden

TypeError: cell is undefined[Learn More] jspdf.plugin.autotable.js:690:17

I am converting a table to pdf, if I put the pdf into portrait then the PDF gets generated with no issues.
However the table is quite wide so I need to switch it to landscape, as soon as I do I receive the following error:
TypeError: cell is undefined[Learn More] jspdf.plugin.autotable.js:690:17
Sadly I can't share the table as it is confidential work (hence the local pdf creation) but here is the script I am using.
$('#btnExportPDF').on('click', function(e){
e.preventDefault();
let source = document.getElementById('iframeReport').contentWindow.document.getElementById('tblReport');
$('#divHiddenTable').html(source.outerHTML);
console.log(source);
let doc = new jsPDF({format: 'a4', unit: 'pt', orientation: 'l'});//change l to p and it works
console.log('PDF Obj');
doc.autoTable({html: '#tblReport'});
console.log('PDF autoTable');
doc.save("RegionalDirectorsWriteOffReviewExport.pdf");
console.log('PDF save');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.9/jspdf.plugin.autotable.js"></script>
After some more investigation, it appears that if I remove the OFFICE 3 section from the table below it works, but with it in it doesn't.
<table class="table table-striped" id="tblReport">
<thead>
<tr>
<th>Client
Code</th>
<th>Client
Partner</th>
<th>Client
Name</th>
<th> </th>
<th align="center">Billed</th>
<th align="center">WIP
W/O</th>
<th align="center">Profit/
Loss</th>
<th>Recovery</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr class="OfficeHeader">
<th colspan="9">City 1</th>
</tr>
<tr>
<td>123456</td>
<td>NAME</td>
<td>COMPANY </td>
<td>WHOAMI</td>
<td class="text-right">2,069.58</td>
<td class="text-right">4,609.66</td>
<td class="text-right">-2,540.08</td>
<td class="text-right">44.89</td>
<td></td>
</tr>
<tr>
<td>45384</td>
<td>NAME</td>
<td>COMPANY 2</td>
<td>WHOAMI</td>
<td class="text-right">195.00</td>
<td class="text-right">4,559.74</td>
<td class="text-right">-4,364.74</td>
<td class="text-right">4.27</td>
<td></td>
</tr>
<tr>
<td>852136</td>
<td>NAME</td>
<td>COMPANY 3</td>
<td> </td>
<td class="text-right">600.00</td>
<td class="text-right">3,109.00</td>
<td class="text-right">-2,509.00</td>
<td class="text-right">19.29</td>
<td></td>
</tr>
<tr>
<td>111</td>
<td>NAME</td>
<td>COMPANY 4</td>
<td>WHOAMI</td>
<td class="text-right">0.00</td>
<td class="text-right">1,677.50</td>
<td class="text-right">-1,677.50</td>
<td class="text-right">0.00</td>
<td></td>
</tr>
<tr>
<td>123654</td>
<td>NAME</td>
<td>COMPANY</td>
<td>WHOAMI</td>
<td class="text-right">0.00</td>
<td class="text-right">1,169.75</td>
<td class="text-right">-1,169.75</td>
<td class="text-right">0.00</td>
<td></td>
</tr>
<tr class="OfficeFooter">
<td colspan="4" class="text-right">Office Totals</td>
<td class="text-right"><div class="double-border">2,864.58</div></td>
<td class="text-right"><div class="double-border">15,125.65</div></td>
<td class="text-right"><div class="double-border">-12,261.07</div></td>
<td colspan="2"><div class="pagebreak"> </div></td>
</tr>
<tr class="OfficeHeader">
<th colspan="9">City 2</th>
</tr>
<tr>
<td>A-569</td>
<td>NAME</td>
<td>COMPANY </td>
<td>WHOIZYOU</td>
<td class="text-right">2,175.00</td>
<td class="text-right">4,361.72</td>
<td class="text-right">-2,186.72</td>
<td class="text-right">49.86</td>
<td>Overrun against a thing that we don't know so can't put here</td>
</tr>
<tr>
<td>D/6666</td>
<td>NAME</td>
<td>COMPANY</td>
<td>WHOIZTHIS</td>
<td class="text-right">1,300.00</td>
<td class="text-right">2,371.01</td>
<td class="text-right">-1,071.01</td>
<td class="text-right">54.82</td>
<td>Taken on from previous prtner and manager</td>
</tr>
<tr class="OfficeFooter">
<td colspan="4" class="text-right">Office Totals</td>
<td class="text-right"><div class="double-border">3,475.00</div></td>
<td class="text-right"><div class="double-border">6,732.73</div></td>
<td class="text-right"><div class="double-border">-3,257.73</div></td>
<td colspan="2"><div class="pagebreak"> </div></td>
</tr>
<tr class="OfficeHeader">
<th colspan="9">OFFICE 3</th>
</tr>
<tr>
<td>GFDGDFGF</td>
<td>NAME</td>
<td>COMPANY </td>
<td>WHO</td>
<td class="text-right">2,910.00</td>
<td class="text-right">8,385.21</td>
<td class="text-right">-5,475.21</td>
<td class="text-right">34.70</td>
<td></td>
</tr>
<tr>
<td>KJHKJHKJ</td>
<td>NAME</td>
<td>COMPANY Limited </td>
<td>WHO</td>
<td class="text-right">2,310.00</td>
<td class="text-right">4,733.76</td>
<td class="text-right">-2,423.76</td>
<td class="text-right">48.79</td>
<td></td>
</tr>
<tr>
<td>OIOUIO</td>
<td>NAM,E</td>
<td>COMPANY</td>
<td>WHOZ</td>
<td class="text-right">0.00</td>
<td class="text-right">2,110.25</td>
<td class="text-right">-2,110.25</td>
<td class="text-right">0.00</td>
<td></td>
</tr>
<tr class="OfficeFooter">
<td colspan="4" class="text-right">Office Totals</td>
<td class="text-right"><div class="double-border">5,220.00</div></td>
<td class="text-right"><div class="double-border">15,229.22</div></td>
<td class="text-right"><div class="double-border">-10,009.22</div></td>
<td colspan="2"><div class="pagebreak"> </div></td>
</tr>
</tbody>
<tfoot>
<tr style="height: 2px !important; overflow: hidden !important;">
<td colspan="4"><div style="line-height: 2px !important; height: 2px !important; font-size: 2px !important; overflow: hidden; !important;"> </div></td>
<td colspan="3"><div style="line-height: 2px !important; height: 2px !important; font-size: 2px !important; background-color: #e7ebee; overflow: hidden !important;"> </div></td>
<td colspan="2"><div style="line-height: 2px !important; height: 2px !important; font-size: 2px !important; overflow: hidden; !important;"> </div></td>
</tr>
<tr>
<td colspan="4" class="text-right">AVG</td>
<td class="text-right">1,319.98</td>
<td class="text-right">3,526.59</td>
<td class="text-right">-2,206.61</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="4" class="text-right">Totals</td>
<td class="text-right"><div class="double-border">27,719.58</div></td>
<td class="text-right"><div class="double-border">74,058.42</div></td>
<td class="text-right"><div class="double-border">-46,338.84</div></td>
<td colspan="2"> </td>
</tr>
</tfoot>
</table>
example JSFiddle https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css

Why is this cart index view (Razor engine) giving me errors

It does not seem to like #{index++;} , I have tried
#{int index++}, #(index++), #(int index++;)
This code didn't throw errors when used with MVC 2.
Here's it's giving me
ambiguity warnings about index.
#model CartTest.Models.Cart
#{
ViewBag.Title = "Index";
}
<h2>Cart Index</h2>
<table width="80%" align="center">
<thead><tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr></thead>
<tbody>
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
#Html.Hidden("Lines.Index", index);
<td align="center">#Html.TextBox("Lines[" + index + "].Quantity",line.Quantity)</td>
<td align="left">#line.Product.Name</td>
<td align="right">#line.Product.Price</td>
<td align="right">#(line.Quantity * line.Product.Price)</td>
<td align="right">#Html.ActionLink("Remove", "RemoveItem", new { productId = line.Product.ProductID }, null)</td>
</tr>
#{index++;}
}
</tbody>
<tfoot>
</tfoot>
</table>
Try like this:
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
...
</tr>
index++;
}
Now that's just to make the Razor compiler happy. It's not a solution I recommend. The real solution I would recommend you is to use editor templates:
<table width="80%" align="center">
<thead>
<tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr>
</thead>
<tbody>
#Html.EditorFor(x => x.Lines)
</tbody>
<tfoot>
</tfoot>
</table>
and inside the corresponding editor template of a Line (~/Views/Shared/EditorTemplates/LineViewModel.cshtml) which will be rendered for each element of the Line collection:
#model LineViewModel
<td align="center">
#Html.TextBoxFor(x => x.Quantity)
</td>
<td align="left">
#Html.DisplayFor(x => x.Product.Name)
</td>
<td align="right">
#Html.DisplayFor(x => x.Product.Price)
</td>
<td align="right">
#Html.DisplayFor(x => x.CalculatedTotalPrice)
</td>
<td align="right">
#Html.ActionLink("Remove", "RemoveItem", new { productId = Model.Product.ProductID }, null)
</td>
See, no more ugly loops, weakly typed helpers, dealing with some indexes, etc... Everything works by conventions.

jQuery loop through td and insert jQueryUI progress bar

I am trying to use the jQuery's progressbar method on the value in my table. I've been able to traverse the table and add the proper div's for the required progressbar's selector. The progress bar does not display the val variable correctly.
var i = 0;
var val = 0;
var id = "";
$("document").ready(function() {
$('#progress tr').find('td').each(function() {
//$(this).append("<div></div>");
if ($(this).html() >= 0)
{
//alert($(this).html());
val = $(this).html();
id = "p_"+i;
$(this).html('<div id="'+id+'"></div>');
$('#'+id).progressbar({
"value": val
});
i++;
//$('#'+id).attr('aria-valuenow',val);
alert(val);
}
});
});
$(function() {
$("#progressbar").progressbar( "option", "value", 37 );
});
<table cellspacing="0" cellpadding="0" border="0" id="progress">
<caption>Class Performance</caption>
<tbody>
<tr>
<th>Student Name</th>
<th>Grade 1</th>
<th>Grade 2</th>
<th>Grade 3</th>
<th>Grade 4</th>
<th>Grade 5</th>
<th>Grade 6</th>
</tr>
<tr>
<td>Wayne, Bruce</td>
<td>100</td>
<td>100</td>
<td>67</td>
<td>14</td>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>Dent, Harvey</td>
<td>100</td>
<td>100</td>
<td>33</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
val = $(this).html();
will retrieve all the 'html'.. i.e along with the tags of the elements within the TD....
If you want to get the integer value alone, try saving it in a hidden field inside the td and accessing it when you want to get the value....

Resources