使用xlsx.full.min.js获取excel表格数据，生成table表格在线浏览

<input type="button" value="预览数据" onclick="previewExcel()"> 


<script src="{% static 'js//xlsx.full.min.js'%}"></script>
        <script>
            function previewExcel() {
                const fileInput = document.getElementById('id_file');//插入要改的id
                const file = fileInput.files[0];

                if (!file) {
                    alert('请先选择一个Excel文件！');
                    return;
                }

                const reader = new FileReader();
                reader.onload = (event) => {
                    const data = event.target.result;
                    const workbook = XLSX.read(data, { type: 'binary' });

                    // 获取第一个工作表的数据
                    const sheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[sheetName];
                    const parsedData = XLSX.utils.sheet_to_json(worksheet);

                    // 渲染数据到预览区域
                    renderPreviewTable(parsedData);
                };

                reader.onerror = () => {
                    alert('无法读取选定的文件，请确保这是一个有效的Excel文件！');
                };

                reader.readAsBinaryString(file);
            }

            // 渲染数据为表格形式
            function renderPreviewTable(data) {
                const previewTable = document.getElementById('previewTable');
                if (!previewTable) {
                    console.error('找不到预览表格元素，请确保ID为"previewTable"的元素存在。');
                    return;
                }

                let tableHtml = '<table class="layui-table layui-form" border="1">'; 

                // 获取表头并构建表头行
                const headerRow = Object.keys(data[0]); 
                tableHtml += '<thead><tr>';
                headerRow.forEach(header => {
                    tableHtml += `<th>${header}</th>`;
                });
                tableHtml += '</tr></thead><tbody>';

                // 遍历数据，排除每一行的最后一列的内容
                for (const row of data) {
                    tableHtml += '<tr>';
                    Object.values(row).forEach(value => { 
                        tableHtml += `<td>${value}</td>`;
                    });
                    tableHtml += '</tr>';
                }

                tableHtml += '</tbody></table>';
                previewTable.innerHTML = tableHtml;
            }

        </script>

input是django服务后端生成也可以用