Excel에서 HTML 테이블로

우리는 작업장에서 재단할 천에 대한 티켓을 인쇄합니다. 티켓에 존재하는 고객 이름, 패브릭 코드, 미터, 배달될 회사와 같은 열. 우리는 엑셀 작업 파일을 가지고 있고 이 정보들을 복사하여 간단하게 디자인되고 제목과 테두리가 있는 엑셀 페이지에 붙여 넣은 다음 인쇄합니다. 티켓 출력을 위해 웹 페이지를 코딩했습니다.

내 소프트웨어 지식을 사용하여 작성한 봇과 같은 것을 제외하고는 작은 것들도 있습니다.

Excel에서 HTML 테이블로 셀을 전송하는 방법을 생각할 때 Excel에서 복사한 행을 메모장에 붙여넣은 다음 셀이\t 문자로 서로 분리되는 것을 보았습니다. 따라서 먼저 javascript의\n 문자에 따라 textarea 요소에 붙여넣은 텍스트로 배열을 채우면 모든 행을 얻었을 것이고 열 배열을 행 배열에 넣으면 Excel 데이터를 2개에 업로드했을 것입니다. -차원 배열 그래서 지금부터 내가 원하는대로 할 수 있습니다. 홀리!

다음은 이를 수행하는 코드입니다.

function excelToArray(text) {
    let data = [];
    const tab = '\\t';
    const yenisatir = '\\n';

    text.split(yenisatir).forEach(s => data.push(s.split(tab)));

    return data;
}

js split 함수 덕분에 문자열을 쉽게 분할할 수 있습니다.

이제 여기에 페이지의 코드를 남길 것입니다. Excel 페이지에서 셀 복사를 시도할 수 있습니다.

<!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">YAPIŞTIRMAK İÇİ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 = '\\t';
            const yenisatir = '\\n';

            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>

Reference

이 문제에 관하여(Excel에서 HTML 테이블로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/canerdemirci/excel-to-html-table-11p3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Excel에서 HTML 테이블로

Reference

좋은 웹페이지 즐겨찾기