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

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量3.5k 收藏 27
点赞数 3
分类专栏： 程序设计实践 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jialchen/article/details/119235924
版权

问题描述

现有一个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文件内容》，它的功能是读取整个文本。我稍加修改，就可以处理结构化数据并显示了。

jialChen
关注
  • 3
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript读取本地Excel文件
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 2078
JavaScript读取本地Excel文件
在html页面使用JavaScript实行文件上传到本地服务器并获取文件所在路径
02-29
使用JavaScript实现文件上传到本地服务器并获取到上传后文件所在路径，是由到JavaScript，java以及html页面。这个比较好，不是在jsp上获取路径，jsp太简单了，而且过时了，所以就在html页面实现了下功能，我主要是做...
HTML、JavaScript 本地文件读写
StringBOX的博客
12-14 2227
文件读取HTML<html> <head> <script type="text/javascript" src="./js/ReadTest.js"></script> </head> <body> <input type="file" id="file" name="files[]" multiple /> <script type="text/javascript"> var
如何使用js读取本地文件并将内容展示到页面
热门推荐
weixin_54000091的博客
11-26 1万+
首先说方法，利用js中fileReader对象读取文件 1.首先创建fileReader对象 2. fileReader对象 读取不同文件调用的方法不同 所以要创建正则判断读取文件类型 3.直接上代码(js部分代码) var reg=/(.csv|.txt)$/m var reg2=/(.mp4)$/m var reg3=/(.jp[e]?g|.png)$/m var reg4=/(.mp3)$/m const input = document.querySelector(
前端JS读取文件内容并展示到页面上
见贤思齐焉，见不贤内自省
12-16 4225
前端JS读取文件内容并展示到页面上
html页面读取本地txt文件,js肿么读取本地txt文件
weixin_35962351的博客
06-03 650
%Public Function ReportFileStatus(FileName)Dim msg,fsomsg = -1Set fso = Server.CreateObject(Scripting.FileSystemObject)If (fso.FileExists(FileName)) Thenmsg = 1Elsemsg = -1End IfReportFileStatus = msg...
html自动读取本地文件目录,如何从本地运行的html javascript页面访问和读取本地文件...
weixin_39614877的博客
05-30 1090
正如在Itay Moav的回答中所讨论的那样,使用本地html文件写入本地文件可能会成为一个问题,而无需在提升的权限模式下运行并具有其他Javascript功能(允许您保存本地文件).但是,完全可以从HTML文件访问本地文件.下面是一些示例代码.mytext.txtMy local text filelocal.htmlwindow.onload = function(){var iframe =...
vue 前端导入excel文件，并在页面表格展示
qq_39593196的博客
07-27 3809
在详细介绍前，先展示下效果。第二步编写导入按钮。
JavaScript 上传文件并展示
weixin_46022934的博客
11-18 1757
文章目录 js的拖拽上传,并在页面中展示文章目录前言一、js实现拖拽功能(文件拖拽到指定位置)二、关于怎么读取文件内容(用到FileRead()对象)1.第一步:遍历传递过来的file2.第二步:判断传递过来的文件是否是图片格式3.第三步:创建 new FileRead() 对象,然后 拿到创建的对象调用 readAsDataURL(f) 方法4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src问
javascript 读取本地文件
03-30
在探讨“JavaScript读取本地文件”的主题时，我们主要聚焦于如何利用JavaScript在浏览器环境中读取用户计算机上的本地文件。这种功能在很多场景下都极为有用，比如在上传文件前预览其内容、数据导入导出操作等。下面...
AJAX实现读取本地文本文档内容并展示在网页上
05-05
在本场景中，我们将探讨如何使用AJAX来读取本地的文本文档内容，并将其展示在网页上。这个功能在现代Web应用中非常常见，比如预览文件、编辑器中的实时保存等。 首先，我们需要理解AJAX的基本工作原理。它通过...
jQuery ajax读取本地json文件的实例
10-19
需要注意的是，由于同源策略的限制，直接在浏览器中通过Ajax读取本地文件可能在某些情况下无法正常工作，例如在非本地服务器环境下。通常，你需要将JSON文件放在与HTML文件相同的服务器上，或者在开发过程中使用如...
js读取本地文件的实例
10-18
通过 `createObjectURL` 方法，我们可以将本地文件转换为浏览器可访问的 URL，然后用这些 URL 在页面上展示图像、音频或视频等。同时，通过 Promise 对象，我们可以编写更优雅的异步代码，以处理文件选择后的操作。...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 81
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1317
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 267
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
js读取本地excel文件展示在浏览器页面
06-06
要实现在浏览器页面中展示本地 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、付费专栏及课程。

余额充值