使用js实现表格的导入导出资源-CSDN下载

共5个文件

html：3个

js：1个

docx：1个

javascript

开发语言

ecmascript

需积分: 16 147 浏览量 2022-02-25 15:07:22 上传评论收藏 230KB RAR 举报

在前端开发中，数据的导入导出功能是常见的需求，特别是在处理表格数据时。本教程将专注于使用JavaScript来实现这一功能，主要涉及ECMAScript（JS的基础标准）和前端技术。我们将探讨如何处理固定格式的表格导入，创建新的数据表，并实现表格数据的导出。导入固定格式表格通常指的是读取如CSV（逗号分隔值）或TSV（制表符分隔值）这样的文件。这些文件格式广泛用于数据交换，因为它们结构简单且易于处理。在JavaScript中，可以使用FileReader API来读取上传的文件内容。例如，当用户选择一个CSV文件后，我们可以监听文件选择事件，读取文件内容并转换为JSON格式： ```javascript document.getElementById('fileInput').addEventListener('change', function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var csvData = event.target.result; var lines = csvData.split('\n'); // 每行数据转换为JSON var jsonData = lines.map(function(line) { return line.split(',').reduce((obj, value, index) => { obj[Object.keys(obj)[index]] = value; return obj; }, {}); }); // 进一步处理JSON数据 handleJsonData(jsonData); }; reader.readAsText(file); }); ``` 处理完导入的数据后，我们可能会需要将其展示在HTML表格中，这可以通过操作DOM元素来实现。使用JavaScript的`document.createElement`、`appendChild`等方法创建新的表格元素，并将数据填充到表格中。例如： ```javascript function createTableFromJson(jsonData) { var table = document.createElement('table'); var thead = document.createElement('thead'); var tbody = document.createElement('tbody'); // 创建表头 var headerRow = document.createElement('tr'); Object.keys(jsonData[0]).forEach(function(key) { var th = document.createElement('th'); th.textContent = key; headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); // 创建表格主体 jsonData.forEach(function(item) { var row = document.createElement('tr'); for (var key in item) { var td = document.createElement('td'); td.textContent = item[key]; row.appendChild(td); } tbody.appendChild(row); }); table.appendChild(tbody); // 将表格添加到页面 document.body.appendChild(table); } ``` 接下来，我们要实现导出表格。在JavaScript中，导出数据通常意味着将数据转换成可下载的文件。对于表格，我们可以生成CSV文件。以下是一个简单的例子： ```javascript function exportTableToCsv(tableId) { var table = document.getElementById(tableId); var rows = table.rows; var csvContent = 'data:text/csv;charset=utf-8,'; // 添加表头 for (var j = 0; j < rows[0].cells.length; j++) { csvContent += rows[0].cells[j].innerText + ','; } csvContent += '\n'; // 添加表格数据 for (var i = 1; i < rows.length; i++) { for (j = 0; j < rows[i].cells.length; j++) { csvContent += rows[i].cells[j].innerText + ','; } csvContent += '\n'; } // 创建隐藏的可下载链接 var encodedUri = encodeURI(csvContent); var link = document.createElement('a'); link.setAttribute('href', encodedUri); link.setAttribute('download', 'export.csv'); // 触发点击 document.body.appendChild(link); link.click(); document.body.removeChild(link); } ``` 通过上述代码，你已经掌握了在JavaScript中处理表格导入导出的基本方法。在实际应用中，可能还需要考虑错误处理、数据验证、兼容性等问题。此外，可以结合现代前端框架（如React、Vue或Angular）以及库（如Papa Parse、FileSaver.js等）来进一步优化这些功能，提高开发效率和用户体验。在进行此类操作时，始终确保遵循良好的编程实践，以保证代码的可维护性和性能。

资源详情

资源评论

资源推荐

收起资源包目录

log转表格.rar （5个子文件）

log转表格

pyqDemo.html 5KB

xlsx.min.js 437KB

wbDemo.html 5KB

操作说明.docx 96KB

ykDemo.html 5KB

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html> <head> <title>sheetDemo.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8">  <style> .up_btn{ margin: 30px; } #toExcel{ background: #4CAF50; margin: 30px; height: 40px; padding: 10px; color: #fff; cursor: pointer; } #excelFile{ margin-top: 30px; } </style> </head> <body> <script type="text/javascript" src="js/xlsx.min.js" ></script> <script> var bt=["Respondent.ID","type","time","loadtime","action","from","wid","vid","videotime","iscomplete","totalstaytime","loadstaytime","videoplaytime"]; var excelFile; // 读取文件的内容 function showfile(obj) { if(!obj.files) { return; } var f = obj.files[0]; var reader = new FileReader(); reader.readAsBinaryString(f); reader.onload = function(e) { var data = e.target.result; excelFile = XLSX.read(data, { type: 'binary' }); //展示所有表 // for(var i=0;i<excelFile.SheetNames.length;i++){ // 　document.getElementById("excelFile").innerHTML +=excelFile.SheetNames[i]+"="+JSON.stringify(XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[i]]))+"<br/>"; // 　　　　　　} var dataTable1 = ""; //只展示第一个表 var headers = new Array(); var str = XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[0]]) dataTable1+= "<table border='1' id='data'><tr>"; for(var key in str[0]){ headers.push(key) //获取表头 //dataTable1 += "<th>" + key + "</th>" } for(var i=0;i<bt.length;i++){ dataTable1 += "<th>" + bt[i] + "</th>" } dataTable1 += "</tr>" console.log(str.length) //这里显示前五行 for(var i=0;i<str.length;i++){ // var json = JSON.stringify(str[i]) var json = str[i]; var one = eval("(" + json[headers[2]] + ")"); var id = json[headers[0]]; var type = json[headers[1]]; for(var j=0;j<one.length;j++){ var ss = []; ss[0] = id; ss[1] = type; ss[2] = one[j].time==null?one[j].intotime:one[j].time; ss[3] = one[j].loadtime==null?"":one[j].loadtime; ss[4] = one[j].operate==null?"":one[j].operate; ss[5] = one[j].from==null?"":one[j].from; ss[6] = one[j].wid==null?"":one[j].wid; ss[7] = one[j].vid==null?"":one[j].vid; ss[8] = one[j].videotime==null?"":one[j].videotime; ss[9] = one[j].iscomplete==null?"":one[j].iscomplete; ss[10] = one[j].totalstaytime==null?"":one[j].totalstaytime; ss[11] = one[j].loadstaytime==null?"":one[j].loadstaytime; ss[12] = one[j].videoplaytime==null?"":one[j].videoplaytime; dataTable1 += "<tr>"; for(var m=0;m<bt.length;m++){ dataTable1 += "<td>" + ss[m] + "</td>"; } dataTable1 += "</tr>"; } /*for( var j=0;j<headers.length;j++){ dataTable1 += "<td>" + json[headers[j]] + "</td>"; var one = eval("(" + json[headers[j]] + ")"); console.log(one.length+one[0].operate); }*/ } dataTable1 += "</table>"; document.getElementById("excelFile").innerHTML = dataTable1; } } </script> <script type="text/javascript"> function toExcel(event) { // 获得表格数据的html标签和文本d; var html = "<html><head><meta charset='UTF-8'></head><body>"+document.getElementById("data").outerHTML+"</body></html>"; // 创建一个Blob对象，第一个参数是文件的数据，第二个参数是文件类型属性对象 var blob = new Blob([html],{type:"application/vnd.ms-excel"}); var a = event.target; // 利用URL的createObjectURL方法为元素a生成blobURL a.href = URL.createObjectURL(blob); // 设置文件名 a.download = "htmltable-base64.xls"; openDownloadDialog(blob,"result.xls"); } </script> <script type="text/javascript"> /** * 通用的打开下载对话框方法，没有测试过具体兼容性 * @param url 下载地址，也可以是一个blob对象，必选 * @param saveName 保存文件名，可选 */ function openDownloadDialog(url, saveName) { if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效 var event; if(window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } aLink.dispatchEvent(event); } </script> <div class="up_btn"> <input type="file" id="xFile" name="" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="showfile(this)"></div> <a id="toExcel" onclick="toExcel(this)">导出excel</a> <div id="excelFile"></div> </body> </html>