Предварительный просмотр загруженного файла CSV с большим количеством столбцов

Когда пользователь опускает файл csv в раздел перетаскивания, он должен иметь возможность видеть предварительный просмотр этого файла CSV, но проблема в том, что файл csv пользователя может иметь много столбцов, например:-

CSV file converted to a html table

На изображении выше видно, что из-за того, что CSV файл имеет много (23) колонок, он стал слишком длинным для моей веб-страницы. Возможно ли вместить его в тег div или добавить полосу прокрутки в нижней части таблицы.

Я тоже пробовал папапарсе, но

enter image description here

JS файл papaparse:-

function Upload(){
    var file = document.getElementById("fileUpload").value;
    data = Papa.parse(file, {
        worker: true,
        step: function(results) {
            Heiho(results.data);
        }
    });
    }

htmlfile of papaparse:-

    <!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">
    <link rel="stylesheet" href="heiho.css" />
    <title>Document</title>
</head>
<body>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />
<hr />
<div id="dvCSV">
</div>
<script src="heiho.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mholt/PapaParse@latest/papaparse.min.js"></script>
<script src="test.js"></script>
</body>
</html>

Примечание:- Я не включаю файл paparse js и css, так как он слишком большой, вы можете скачать его по ссылке ниже.

Что такое papaparse?

Вернуться на верх