Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
​
        function newTabPrint(container_id) {
            
            var mainContent = document.getElementById(container_id);
​
            var mcontent="<html>";
            
            var mhead="<head>";
            mhead = mhead+'<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n';
            mhead = mhead+'<title>MY NEW TAB PAGE TITLE</title>\n';
            mhead = mhead+'<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\n';
            mhead = mhead+'<head>\n';
            
            mcontent = mcontent+mhead;
            mcontent = mcontent+"<body onload=window.print()>\n";
            mcontent = mcontent+'<div id="full_content" class="myReceipt">\n'+mainContent.innerHTML+"</div>"; 
            mcontent = mcontent+"</body>";
            mcontent = mcontent+"</html>";
            
            var w = window.open();
            w.document.head.innerHTML = mhead;
            w.document.body.innerHTML = mcontent;
        
            w.print();
        
​
        }
​
    </script>
</head>
<body>
    
​
    <input type="button" onclick="newTabPrint('full_content')" value="Print" class="myPrintBtn" />
​
    <div id="full_content" class="myReceipt">
        <style type="text/css">
        
        .myPrintBtn {
            background:#2D882D; 
            color: #FFFFFF;
            width: 100px; 
            height: 50px; 
            font-size: 18px; 
            font-weight: bolder;
        }
​
        .myReceipt {
            display:block; 
            width: 300px;
            color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }
​
        .myReceipt > img {
            display: block;
            width: 100%;
        }
​
        .myTable {
            background: #000000;
        }
​
        .myTable tr > th {
            color: #ffffff;
            padding: 5px;
        }
        .myTable tr > td {
            background: #ffffff;
            padding: 5px;
        }
        .toRight {
            text-align: right;
        }
        .toCenter {
            text-align: center;
        }
    </style>
​
        <img src="https://www.rcti.es/source/test_logo.png" />
        <h3 class="toCenter">HTML CODE TITLE</h3>
        <p>
            My addres<br>
            My phone and e-mail
        </p>
        <table class="myTable">
            <tr>
                <th>DESCRIPTION</th>
                <th>PRICE</th>
                <th>QUANTITY</th>
                <th>SUM</th>
            </tr>
            <tr>
                <td>Bread</td>
                <td>0.99</td>
                <td>1</td>
                <td>0.99</td>
            </tr>
            <tr>
                <td>Onion</td>
                <td>1.50</td>
                <td>2.300</td>
                <td>3.45</td>
            </tr>
            <tr>
                <td>Tomato</td>
                <td>3.50</td>
                <td>2.550</td>
                <td>8.93</td>
            </tr>
        </table>
        <h2 class="toRight">TOTAL: 13.37 €</h2>
        <p class="toCenter">Thank you so much!</p>
    </div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers