CODEWITHSUNDEEP
javascript
THpubs
THpubs

Reputation: 8162

How to create a table with rows of numbers (vertically) and generate a pdf using javascript?

my client asked to attache a module to the website which can generate warranty card numbers. I have attached a sample page. The result should look like that. A page will have 400 numbers. Will give only a range of 400 numbers to generate the document. The table lines should also be visible and the numbers should go from top to bottom. How can I do this using Javascript?

enter image description here

PS : Sorry.. forgot to attache the picture

Upvotes: 0

Views: 133

Answers (1)

Develoger
Develoger

Reputation: 3998

Here is the working example of what you described:

function cards(config) {
    var me = this;
    
    me.initialNumber = config.initialNumber;
    me.cardNumberPrefix = config.cardNumberPrefix;
    me.outputElementId = config.outputElementId;
    me.cardLimit = config.cardLimit;
    me.cardElements = [];
};

cards.prototype = {
    make: function() {
        var me = this;
        
        var maximumCards = me.initialNumber + me.cardLimit;
    	for(var i = me.initialNumber; i < maximumCards; i++) {
        	me.generateCard(i);
        };
        
        me.populateOutputElem();
    },
    generateCard: function(warrantyNumber) {
        var me = this;
        
        var card = me.cardTemplate(me.cardNumberPrefix + warrantyNumber);
        me.cardElements.push(card);
    },
    cardTemplate: function(content) {
    	var tmpl = '<div class="warranty-card">{content}</div>';
        
       	var populatedTmpl = tmpl.replace('{content}', content);
        return populatedTmpl;
    },
    populateOutputElem: function() {
        var me = this,
            outputElem = document.getElementById(me.outputElementId),
            finalConent = '';
        
        for(var i = 0; i < me.cardElements.length; i++) {
        	finalConent += me.cardElements[i];
        }
        
        outputElem.innerHTML = finalConent;
    }
};


// generate the cards
var warrantyCards = new cards({
    initialNumber: 20000,
    cardNumberPrefix: '00',
    outputElementId: 'warranties',
    cardLimit: 400
});
warrantyCards.make();
.warranty-card {
    width: 80px;
    border: 1px solid #000;
    padding: 5px 12px;
    float: left;
    box-sizing: border-box;
    text-align: center;
}
<div id="warranties"></div>

After you have the HTML content generated you can render it to PDF with some library like this one: https://www.npmjs.com/package/phantom-html2pdf

Upvotes: 2

Related Questions