All geek questions in one place

JsPDF and various devices

I use jsPDF to create a PDF file from my invoice generating web application. Although the generated PDF is great for my 17 inch device. PDF, which is created on other devices, is usually cropped anyway.

Therefore, I wanted to know if there is a way for me to PDF, which does not depend on the screen size of the device.

I try to make it permission independent, but nothing works. In this configuration, the PDF is created perfectly on my device, but not on other smaller devices, such as the 13-inch Mac. But even when using devices of the same size, the built-in display resolutions pose a certain problem.

//Javascript Function that calls and downloads PDF
  document.getElementById('print-invoice-sectionP').style.width = '1300px';
  document.getElementById('pInvoiceContent').style.paddingTop = '145px';

  var doc = new jsPDF('l', 'pt', 'letter');

doc.addHTML(document.getElementById("print-invoice-sectionP"),function() {
    	doc.save(''+fInvoiceId+'.pdf');
});
HTML Code
<section id="print-invoice-sectionP" class="nodisplay mdl-grid" style="background: #fff; min-width: 1300px; min-height: 850px;  ">

    <div style="background: url('roshni.png'); background-size: cover; background-repeat: no-repeat; min-width: 1300px; min-height: 850px; "> 

      <div class="mdl-grid mdl-card__supporting-text pText" id="pInvoiceContent" style="color: #000;  min-width: 1300px;  ">
        
        <div style="width: 36%; border-right:solid #000; font-size: 13pt;">
          <h5><strong>To</strong></h5>
          <p><strong><h4 id="pCnameP" ></h4></strong></p>
          <p><span id="pCaddrP" class="pText"></span></p>
          <p id="pCgst" class="pText"></p>
          <p id="pCscode" class="pText"></p>
        </div>

        <div style="width: 30%; border-right:solid #000; margin-left: 10px; padding-top:10px;">
          <p  class="pText">Publication: Daily Roshni, Srinagar</p>
          <p  class="pText" id="gstNoP"></p>
          <p  class="pText">Client: <strong><span id="adClientP"></span></strong></p>
          <p  class="pText">Description: <span id="adDescP"></span></p>
          <p  id="pHSNc"></p>
          <p  class="pText">Page:  <span id='adPageP'></span></p>
          <p  class="pText">Size: <strong><span id="adSizeP"></span> <span id="mUnitPa"></span></strong> (<span id='adWidthP'></span> x <span id='adHeightP'></span>)</p>
          <p  class="pText">Rate: <strong> ₹ <span id="adRateP"></span></strong> per <span id="mUnitPd"></span></p>
        </div>

        <div style="width: 30%; margin-left: 10px; padding-top:10px;" class="margin">
          <p  class="pText" style="min-height: 15%;">Invoice ID : <span id="pInIdP"></span></p>
          <p  class="pText" style="min-height: 15%;">Invoice Date : <span id="pInDateP"></span></p>
          <p  cclass="pText" style="min-height: 15%;">Release Order No. : <span class="pText" id="rOrderNoP"></span></p>
          <p  class="pText" style="min-height: 15%;">Release Order Date : <span id="rOrderDateP"></span></p>
          <p  class="pText" style="min-height: 15%;">Published On : <span id="publishDateP"></span></p>
        </div>

        
        <div class="mdl-card__actions mdl-card--border" style="margin-top: 10px;margin-bottom: 10px; color: #000;"></div>


        <div style="min-width: 20%; border-right:solid #000; margin-right: 10px; margin-left: 10px;">
          <p class="pText"" >Sub Total:</p>
          <strong><span id="sTotalP"></span></strong>
        </div>

        <div id="cChargesDivP" style="min-width: 20%; border-right:solid #000; margin-right: 10px; margin-left: 10px;">
            <p  class="pText">Color Charges @ <span id="cChargesP"></span> % :  </p>
            <strong>₹ <span id="cChargesAmt"></span></strong>
        </div>

        <div id="discountDivP" style="min-width: 20%; border-right:solid #000; padding-right: 10px; margin-left: 10px;">
            <p class="pText">Commission / Discount @ <span id="discountP"></span> % : </p>  
            <strong>₹ <span id="discountAmt"></span></strong>
        </div>
        
        <div id="gstDivP" style="min-width: 20%; margin-right: 10px; margin-left: 10px;" >
            <p  class="pText">IGST @ <span id="gstP"></span> % :  </p>
            <strong>₹ <span id="gstAmt"></span></strong>
        </div>

              
        <div style="width: 100%; ">
        <div class="mdl-card__actions mdl-card--border" style="margin-top: 10px;margin-bottom: 10px;"></div>

        <div style="width: 36%; border-right:solid #000; float: left;">
          <p class="pText">Amount to be Paid</p> 
          <strong><h4 id="gTotalP" style="width: 30%"></h4></strong>
        </div>

        <div style="width: 60%;float: right;">
          <p class="pText">Amount to be Paid In Words</p> 
          <strong><h4 id="gTotalWords" ></h4></strong>
        </div>
      </div>

      </div>
      
    

    </div>
  </section>
Run codeHide result
+4
source share
1 answer

- responsive, jsPDF. :

-

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>A simple, clean, and responsive HTML invoice template</title>
    
    <style>
    .invoice-box{
        max-width:800px;
        margin:auto;
        padding:30px;
        border:1px solid #eee;
        box-shadow:0 0 10px rgba(0, 0, 0, .15);
        font-size:16px;
        line-height:24px;
        font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color:#555;
    }
    
    .invoice-box table{
        width:100%;
        line-height:inherit;
        text-align:left;
    }
    
    .invoice-box table td{
        padding:5px;
        vertical-align:top;
    }
    
    .invoice-box table tr td:nth-child(2){
        text-align:right;
    }
    
    .invoice-box table tr.top table td{
        padding-bottom:20px;
    }
    
    .invoice-box table tr.top table td.title{
        font-size:45px;
        line-height:45px;
        color:#333;
    }
    
    .invoice-box table tr.information table td{
        padding-bottom:40px;
    }
    
    .invoice-box table tr.heading td{
        background:#eee;
        border-bottom:1px solid #ddd;
        font-weight:bold;
    }
    
    .invoice-box table tr.details td{
        padding-bottom:20px;
    }
    
    .invoice-box table tr.item td{
        border-bottom:1px solid #eee;
    }
    
    .invoice-box table tr.item.last td{
        border-bottom:none;
    }
    
    .invoice-box table tr.total td:nth-child(2){
        border-top:2px solid #eee;
        font-weight:bold;
    }
    
    @media only screen and (max-width: 600px) {
        .invoice-box table tr.top table td{
            width:100%;
            display:block;
            text-align:center;
        }
        
        .invoice-box table tr.information table td{
            width:100%;
            display:block;
            text-align:center;
        }
    }
    </style>
</head>

<body>
    <div class="invoice-box">
        <table cellpadding="0" cellspacing="0">
            <tr class="top">
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="title">
                                <img src="http://nextstepwebs.com/images/logo.png" style="width:100%; max-width:300px;">
                            </td>
                            
                            <td>
                                Invoice #: 123<br>
                                Created: January 1, 2015<br>
                                Due: February 1, 2015
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr class="information">
                <td colspan="2">
                    <table>
                        <tr>
                            <td>
                                Next Step Webs, Inc.<br>
                                12345 Sunny Road<br>
                                Sunnyville, TX 12345
                            </td>
                            
                            <td>
                                Acme Corp.<br>
                                John Doe<br>
                                john@example.com
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr class="heading">
                <td>
                    Payment Method
                </td>
                
                <td>
                    Check #
                </td>
            </tr>
            
            <tr class="details">
                <td>
                    Check
                </td>
                
                <td>
                    1000
                </td>
            </tr>
            
            <tr class="heading">
                <td>
                    Item
                </td>
                
                <td>
                    Price
                </td>
            </tr>
            
            <tr class="item">
                <td>
                    Website design
                </td>
                
                <td>
                    $300.00
                </td>
            </tr>
            
            <tr class="item">
                <td>
                    Hosting (3 months)
                </td>
                
                <td>
                    $75.00
                </td>
            </tr>
            
            <tr class="item last">
                <td>
                    Domain name (1 year)
                </td>
                
                <td>
                    $10.00
                </td>
            </tr>
            
            <tr class="total">
                <td></td>
                
                <td>
                   Total: $385.00
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
Hide result

, javascript-, Print.js.
- , pdf, . htmlcanvas, . script "" - . DOM , , 100% , , , .

HTML5/Canvas/JavaScript.

+2

Source: https://habr.com/ru/post/1687136/

More articles:


All Articles