JavaScript读取本地文件并在页面上展示

问题描述

现有一个csv文件(表格),想要在HTML页面中选择文件并打开,显示表格。

技术要点

  • HTML 表格结构及其样式
  • JavaScript 文件读写
  • JavaScript DOM添加

效果展示

文件中的内容
在这里插入图片描述
打开网页的初始效果
在这里插入图片描述

选择文件后的展示效果
在这里插入图片描述

参考程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			text-align: center;
			border-collapse: collapse;
			border:1px solid #808080;
		}
		td{
			padding: 0px 40px 0px 40px;
		}
	</style>
</head>
<body>
	<input type='file' accept='text/plain' onchange='openFile(event)'><br>
	        <div id="output"></div>
	<table id="tab" align="center">
    	<caption>表格展示模块</caption>
	    <thead>
	         <tr>
	             <th colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
	         </tr>
	    </thead>
        <tbody>
	        <!-- 此处可以置空,也可以加一行,作为表头行 -->
	    </tbody>
        <!-- <tfoot><td>备注:</td><td colspan="2"></td></tfoot> -->
    </table>
    
    <script type="text/javascript">
    
    	function addtr(row_index,row_element_arr){
            var tab=document.getElementById('tab');
            if(row_index%2==0)
            {
            	var html="<tr style='background: #C0C0C0'>";
            }
            else
            {
            	var html="<tr style='background: #fff'>";
            }
            var i;
            for(i=0;i<row_element_arr.length;i++)
            {

                html+='<td>'+String(row_element_arr[i])+'</td>';
            }
            html+="</td></tr>";
            tab.innerHTML+=html;
        }
        var openFile = function(event)
        {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() 
            {
                if(reader.result) 
                {
                    //文件内容:reader.result
                    var arr=reader.result.split("\n");
                    
                    // $("#output").html(reader.result);
                    for (let index=0; index < arr.length; index++)
                    {
                    	// arr[index],一行数据
                        row_element_arr=arr[index].split(",");
                        addtr(index,row_element_arr);
                    }
                }
            };
            reader.readAsText(input.files[0]);
        };
    </script>
</body>
</html>

本文章参考CSDN上的一篇文章《JS-读取txt文件内容》,它的功能是读取整个文本。我稍加修改,就可以处理结构化数据并显示了。

要实现在浏览器页面展示本地 Excel 文件,可以通过以下步骤实现: 1. 使用 JavaScript FileReader API 读取本地 Excel 文件,并将其转换为二进制数据。 2. 使用第三方库如 SheetJS 或 Handsontable 解析 Excel 文件,并将其转换为可视化的数据表格。 3. 将解析出的数据表格插入到 HTML 页面中,以展示在浏览器页面中。 以下是一个基本实现的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>展示本地 Excel 文件</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script> </head> <body> <input type="file" id="fileInput" /> <div id="table"></div> <script> const fileInput = document.getElementById('fileInput'); const tableDiv = document.getElementById('table'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, {type: 'array'}); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const json = XLSX.utils.sheet_to_json(worksheet, {header: 1}); const table = buildTable(json); tableDiv.innerHTML = ''; tableDiv.appendChild(table); }; reader.readAsArrayBuffer(file); }); function buildTable(data) { const table = document.createElement('table'); for (let i = 0; i < data.length; i++) { const row = table.insertRow(-1); for (let j = 0; j < data[i].length; j++) { const cell = row.insertCell(-1); cell.textContent = data[i][j]; } } return table; } </script> </body> </html> ``` 这个示例中使用了 SheetJS 库来解析 Excel 文件,使用了 HTML 的 `<table>` 元素来展示数据表格。用户选择本地 Excel 文件后,会触发 `change` 事件,然后读取文件并解析成数据表格,并插入到 HTML 页面中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值