Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 15, 2022 01:01 pm GMT

Excel to Html Table

We print tickets for fabrics to be cut in our workplace. Such as customer name, fabric code, meters, company to be delivered columns that exists in the ticket. We have an excel work file and we copy these pieces of information and we paste it to an excel page that is simply designed and has titles and borders then we print it. I coded a web page to take the output of the ticket.

There are small things too except those like bots that I wrote with use my software knowledge.

When I think about how possible to transfer cells from excel to HTML table I pasted rows that I've copied from excel to the notepad then I saw that the cells separating from each other by character. So If I firstly fill an array with the text that I pasted to the textarea element according to
characters in javascript then I would have got all rows and if I put column array into row array I would have uploaded the excel data to a two-dimensional array so I do whatever I want from now on. Holey!

Here is the piece of code that does it.

function excelToArray(text) {    let data = [];    const tab = '\';    const yenisatir = '\
'; text.split(yenisatir).forEach(s => data.push(s.split(tab))); return data;}

Thanks to js split function we easily partition the string.

Now I'm leaving the codes of the page here. You can try copying cells from an excel page.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Excel'den HTML Tablosuna</title>    <style>        @import url('<https://fonts.googleapis.com/css2?family=Roboto&display=swap>');        * {            box-sizing: border-box;            padding: 0;            margin: 0;        }        body {            font-family: 'Roboto', sans-serif;        }        #pasteBtn {            outline: none;            background: royalblue;            padding: 1rem;            font-weight: bold;            font-size: 2rem;            color: #fff;            cursor: pointer;            display: block;            width: 100vw;            height: 100vh;            border: 0;        }        table {            border-collapse: collapse;            margin: 1rem;        }        td {            padding: .5rem;            border: 1px solid #fff;        }        tr:nth-child(odd) td {            background: lightblue;        }        tr:hover td {            background: lightcoral;        }    </style></head><body>    <textarea></textarea>        <table></table>    <button id="pasteBtn">YAPITIRMAK N TIKLA</button>    <script>        const tableEL = document.querySelector('table');        const textareaEL = document.querySelector('textarea');        const pasteBtn = document.querySelector('#pasteBtn');        initElements();        pasteBtn.addEventListener('click', async () => {            pasteBtn.style.display = 'none';            textareaEL.value = await navigator.clipboard.readText();            tableEL.innerHTML = excelToTable(textareaEL.value);            tableEL.style.display = 'block';        });        function initElements() {            tableEL.style.display = 'none';            textareaEL.style.display = 'none';        }        function excelToArray(text) {            let data = [];            const tab = '\';            const yenisatir = '\
'; text.split(yenisatir).forEach(s => data.push(s.split(tab))); return data; } function excelToTable(text) { const data = excelToArray(text); let tableHTML = '<tbody>'; data.forEach(d => { tableHTML += '<tr>'; d.forEach(c => tableHTML += `<td>${c}</td>`); tableHTML += '</tr>'; }); tableHTML += '</tbody>'; return tableHTML; } </script></body></html>

Original Link: https://dev.to/canerdemirci/excel-to-html-table-11p3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To