I am attempting to print payment receipt using thermal POS printer using Print.js library. I can successfully print the page using the printjs. But the print comes with extra margins as per A4 page.
Is there any way to print it to fit to 58mm with to page margins?
Also it would be very helpful if any alternatives to print using JavaScript are given. Following is my work.
HTML & JS
<button id="print-receipt">print to pos</button>
<div id="invoice-print-div" class="hidden">
<div class="text-center" style="width:58mm;background-color:red;">
<h4>alpha</h4>
<table border="0">
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
<tr>
<td>abc</td>
<td>1</td>
<td>120</td>
</tr>
<tr>
<td>pqr</td>
<td>2</td>
<td>240</td>
</tr>
<tr>
<td>xyz</td>
<td>4</td>
<td>360</td>
</tr>
</table>
</div>
</div>
<script>
$("#print-receipt").on("click", function() {
printJS("invoice-print-div", "html");
});
</script>
1- Instead of using printJS() with the default two arguments, you can pass an object as argument so:
printJS('invoice-print-div', 'html'); should be replaced with:
printJS({printable: 'invoice-print-div', type: 'html',style: ['#page { size: A4; margin: 0mm;} body {margin: 0;} h4 {margin:0}'], targetStyles: ['*']});
Please note that when it comes to actual printing, the property style in the argument object is where you can pass your custom style that should be applied to the html being printed.
I have made a demo in stackblitz Please do check it out.
For more information you can check PrintJS configuration options
2- As you ask for some alternatives of PrintJS, You can checkout jsPDF Library and here some explanations about it.
Related
I am coding a page with several dynamic/sortable tables in it (one below another) to share PDF documents. Each Document tittle in the table contain a link to open the PDF in a new tab. Everything works fine, BUT when I scroll down the page and open a dynamic table/or minimize the table, the page jumps to top of the page/to default position. JavaScript's RETURN FALSE fixes this problem but all the links in the table are dead. Can anyone help to fix this? I attach the basic code structure here you can see what I am doing...
HTML:
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
JAVASCRIPT:
// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
});
});
});
2 things
1st id's should be unique, so change all instances of
id="tabledata"
to
class="tabledata"
2nd, try to give you td's that contain the link a different class than those that have data, then attach slide toggle to that class, maybe like:
$('.newclass').each(function(){
.....
I didn't succeed with the hints you gave but thanks anyway! I did everything but page was still jumping when opening/closing the table. BUT...I was browsing different forums and found this simple answer.
Using "#/" instead of "#" and the page won't jump. Hmm.. sometimes the answer is too simple, seemingly :o
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1> ...
Rock'nRoll!
I have a table that I am trying to make mobile friendly see below:
<tbody>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>two</td>
</tr>
</tbody>
I'm looking to create single columns of this table so it can be display better on mobile.
Conceptually I'm thinking to ad an /tr after each /td excluding /td:last of types
My tables are dynamically generated, so it needs to dynamic solution, anyone have anythoughts on how to approach this?
Below is what the resulting table would ideally look like.
<tbody>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
</tbody>
<tbody>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
</tbody>
You could achieve the same look with CSS and media queries:
#media (max-width: 400px) { /* or whatever you want your mobile breakpoint to be */
tr, td { float:left; width:100%; }
}
http://jsfiddle.net/nWPzp/
If you're not displaying tabular data I find my preference is to stay away from tables and use lists/divs instead. That being said here are some examples of "Responsive Tables" that do contain tabular data:
http://css-tricks.com/responsive-data-table-roundup/
As pointed out a lot of them are css tricks.
Try JS. Use getElementById. Write:
document.getElementById("dynamic").innerHTML="new code"
I'm trying to create a context menu for tables using javascript and bootstrap, but when I right click on a table that's in an editable div, I get some arrows that allow the user to add some new rows and columns. Is there anyway to remove them ?
I'm using Firefox
Thank you very much.
Update: link to the fiddle http://jsfiddle.net/toby3105/LSyC8/7/
<div id="context" data-toggle="context" data-target="#context-menu" contenteditable="true">
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
I don't think is has anything to do with bootstrap, i think i only has to do with Firefox. The z-index is 15000.
Apparently this does the trick.
document.designMode = "on";
document.execCommand("enableObjectResizing", false, "false");
document.execCommand("enableInlineTableEditing", false, "false");
I need the header to be fixed in the below table.
<thead>
<tr >
<td>tjj</td>
<td>Marketing Phjgjgh </td>
<td>Mhjgjg Program Description </td>
<td>Markjghjghgram type </td>
<td>CRM CjgjgjFlag </td>
<td>Brajghjjative </td>
<td>Marketijhgjhm Brand </td>
<td>Acjhgjting Program </td>
<td>CRMjgjhype</td>
<td>Sweejghjhkes</td>
<td>Oldgjjgjivity Bypass</td>
</tr>
</thead>
<tbody>
<tr class="alternate1">
<td align="center"></td>
<td>EShjgjARDI</td>
<td>eShojghjmports</td>
<td>4 - Datajgjgjg or gjghjCapture</td>
<td>Y</td>
<td>38 jgjhards</td>
<td>00 jghjhporate</td>
<td>jh</td>
<td>jh</td>
<td>jgh</td>
<td>ghjhg</td>
</tr>
---SNIP-just more rows---
I've tried many solutions, but they only work on some browsers. For example,
thead tr{
position:relative;
top: expression(offsetParent.scrollTop);
}
and <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> makes it work in only IE. The two-table concept does not work either.
Have you considered using jQgrid? I highly recommend it. It works in every browser I have ever tried and adds significant functionality.
If you don't want to do that, you may want to take their rendered approach. They have a table for the header and another for the body. The biggest hurdle with this approach is getting the columns to match width, but their approach works well and you can make the full result resize as needed.
You can see it in action here.
Using Jquery, I want to build a table of size 4x4 with equal sized blocks, which I can "fill" with a color.
Visual example:
The circle does not have to be included for this question.
I'm looking for advice, links, or suggestions on how to build this. I'm not very familiar with Jquery's canvas/draw functionality but I think that may be a possible solution. The determinate for which boxes are filled will be set by how many levels of a job a player has finished. For example the first column shows that the player has completed all 4 levels.
However, I can worry about how to send in the information. What I'm unsure of is (again) the best way to make a simple table like this.
Here you go:
HTML:
<table>
<tr>
<td class="a"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="a"></td>
<td></td>
<td class="c"></td>
<td></td>
</tr>
<tr>
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td></td>
</tr>
<tr>
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
</tr>
</table>
CSS:
td { width:40px; height:40px; border:1px solid #333; }
td.a { background-color:red; }
td.b { background-color:blue; }
td.c { background-color:purple; }
td.d { background-color:green; }
Additionally, you may want to use a CSS Reset style sheet in order to make the table appear the same cross-browser.
Live demo: http://jsfiddle.net/simevidas/hdBZY/
Here's a working jsFiddle, it uses jQuery and Tables to do exactly as you asked. From an array of items, it will automagically build the graph, all you have to provide is the array and the css.
http://jsfiddle.net/Z7Ds6/3/
I agree with the comments you've gotten, I don't see anything wrong with using plain old html tables for this.
You could either create the table and css like Sime Vidas suggested and manipulate class names with jquery, or you could create the html elements via jquery with something like $('<table>') etc, and use the .append() method to create child elements and/or dump the code to the page somewhere.