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

Question

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?

PS : Sorry.. forgot to attache the picture

Duplicate? http://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript — philonous, Aug 19 '15 at 08:12
@philonous please read the question in full. That will only solve a part of my question. By the way, thanks for pointing it out. — THpubs, Aug 19 '15 at 08:15
Do you really need this to be rendered inside of HTML table element? — Develoger, Aug 19 '15 at 09:40

score 2 · Accepted Answer · answered Aug 19 '15 at 11:21

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

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

1 Answers1