0

I want to make product catalog, suppose 1-4 products in a row, and each product will be in a box with its details and price mentioned. I would like to be able to easily create the catalog based on a XML/CSV File which I can update.. Can any one point me in the right direction on how to achieve it. I am currently familiar with HTML/CSS.. I can pick up on Javascript if required.

Once finished the page will have a header, and then products displayed below.. I intend to print the page to PDF to share with other users..

Hussain Saeed
  • 3
  • 1

1 Answers1

1

First of all you should read your file and load from javascript.

Then once loaded, you parse it into JSON object

After this, you can preview the contents inside the HTML (this is important because we'll use this html table to generate the pdf)

Using the library jsPDF and it's plugin AutoTable we generate a pdf file with the HTML table we generated previously.

This are the sample CSV file I used to test the example

Product,Price,Barcode
Sample product 1,100,802760000926
Sample product 2,95,802760000926
Sample product 3,20,802760000926

You can try it in my fiddle: https://jsfiddle.net/rogeliomonter/2f9m0qse/

let myList = {};
/*Function to load from CSV file*/
function openFile(event) {
    var input = event.target;
    var node = document.getElementById('output');
    node.innerText = '';
    var reader = new FileReader();
    reader.onload = function () {
        text = reader.result;
       //set to myList variable to be used later
        myList = JSON.parse(csvJSON(reader.result));
        buildHtmlTable('#output');
    };
    reader.readAsText(input.files[0]);
};

/*this function generates the HTML table*/
function buildHtmlTable(selector) {
    var columns = addAllColumnHeaders(myList, selector);

    for (var i = 0; i < myList.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = myList[i][columns[colIndex]];
            if (cellValue == null) cellValue = "";
            row$.append($('<td/>').html(cellValue));
        }
        $(selector).append(row$);
    }
}

/*Supports the function that generates the HTML table*/
function addAllColumnHeaders(myList, selector) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1) {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $(selector).append(headerTr$);

    return columnSet;
}

/*Converts CSV values into JSON object*/
function csvJSON(csv) {
    var lines = csv.split("\n");
    var result = [];
    var headers = lines[0].split(",");
    for (var i = 1; i < lines.length; i++) {

        var obj = {};
        var currentline = lines[i].split(",");
        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    }
    //return result; //JavaScript object
    return JSON.stringify(result); //JSON
}

/*Uses jsPDF libary to generate a PDF File from the HTML table*/
function download() {
    // Default export is a4 paper, portrait, using millimeters for units
    const doc = new jsPDF();

    doc.text("My List", 10, 10);

    var columns = ["Product", "Price", "Barcode"];
    
    //Here we use the id of the table
    doc.autoTable({ html: '#output' })

    doc.save("myList.pdf");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>  
<input type='file' accept='text/csv' onchange='openFile(event)'>
  <br>
  <!-- the HTML table that will have the csv table -->
  <table id='output' border="1"></table>
  <br>
  <button onclick="download()">Generate PDF</button>
Rogelio Monter
  • 1,084
  • 7
  • 18