js前端下载并编辑Excel样式_前端下载excel资源-CSDN文库

共6个文件

js：3个

json：1个

html：1个

需积分: 50 72 浏览量 2017-12-26 13:54:28 上传评论收藏 67KB ZIP 举报

在JavaScript（JS）前端开发中，处理Excel文件的下载和编辑是常见的需求，尤其是在需要用户交互和数据分析的应用中。本文将深入探讨如何使用JS在浏览器环境中实现Excel的下载和样式编辑，同时考虑到兼容IE8这一老旧但仍然需要支持的浏览器。 1. **下载Excel文件** 在前端下载Excel文件通常涉及两种方法：`a标签`和`Blob对象`。对于IE8，由于不支持`Blob`和`URL.createObjectURL`，我们需要使用`a标签`的`download`属性。你需要创建一个隐藏的`<a>`标签，设置其`href`为Excel文件的URL或数据URL，然后触发点击事件来启动下载。 2. **创建Excel文件** 创建Excel文件可以使用库如`SheetJS`（也称为`xlsx`库）。这个库提供了读写Excel文件的功能，包括Biff8（Excel 97-2003格式）和OpenXML（Excel 2007+格式），并能很好地兼容IE8。你可以用它来创建工作表，添加数据，设置样式，然后导出为二进制或Base64编码的字符串。 3. **编辑Excel样式** 使用`SheetJS`库，你可以设置单元格的样式，如字体、颜色、对齐方式、边框等。例如，你可以通过`XLSX.utils.sheet_add_aoa`函数添加数据，同时传递一个包含样式的数组。每个单元格的样式可以用对象表示，如`{font: {sz: 12, color: {rgb: 'FF0000'}}, alignment: {horizontal: 'center'}}`。 4. **转换为Data URL** 将Excel文件转换为Data URL，可以使用`SheetJS`的`XLSX.writeFile`方法，将输出的文件内容转换为Base64字符串，然后插入到`a标签`的`href`中。对于IE8，可能需要使用`FileSaver.js`库来模拟文件保存行为，因为IE8不支持HTML5的`download`属性。 5. **兼容IE8** 为了在IE8上运行，你需要确保所有使用的库都支持这个老版本的浏览器。例如，`SheetJS`库就声称支持IE8，但可能需要避免使用ES5以上的特性。同时，`FileSaver.js`是专为旧版浏览器设计的文件保存解决方案。请确保这些库已正确引入并适配。 6. **示例代码** 下面是一个简单的示例，展示如何创建并下载一个包含样式的Excel文件： ```javascript var workbook = XLSX.utils.book_new(); var sheet_name_list = ['SheetJS']; var data = [['数据1', '数据2'], ['数据3', '数据4']]; var ws = XLSX.utils.aoa_to_sheet(data); // 设置样式 ws['!cols'] = [{wch: 20}, {wch: 20}]; ws['A1'].s = {font: {sz: 14, bold: true}}; // 添加到工作簿 XLSX.utils.book_append_sheet(workbook, ws, sheet_name_list[0]); // 生成Data URL var url = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'; url += btoa(XLSX.write(workbook, {type: 'base64'})); // 创建并触发下载 var link = document.createElement('a'); link.href = url; link.download = 'example.xlsx'; link.click(); ``` 7. **注意事项** - 由于IE8的安全限制，直接从本地文件系统触发下载可能不会工作，你需要通过服务器环境提供文件。 - 生成的Excel文件大小可能会影响性能，特别是对于大数据量和复杂样式的情况。 - IE8的内存管理有限，处理大量数据时需谨慎。总结，使用JavaScript在前端下载并编辑Excel样式涉及到多个步骤，包括选择合适的库、创建Excel文件、设置样式、转换为Data URL以及考虑兼容性问题。通过理解这些概念和实践，开发者可以构建出功能丰富的前端Excel处理功能，即使在较旧的浏览器环境下也能正常运行。

资源推荐

资源详情

资源评论

收起资源包目录

downLoad_excel.zip （6个子文件）

downLoad_excel

reset.css 871B

jquery-1.9.1.min.js 90KB

userlist.json 0B

jquery.table2excel.js 9KB

index.html 7KB

jquery.min.js 82KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type="text/css"> /* ul li{ float: left; } */ </style> </head> <body> <input type="button" id="wwo" value="导出" />   <script type="text/javascript" src="jquery-1.9.1.min.js"></script>  <script type="text/javascript"> //不带样式 /*var array=[ { "name":"韩寒", "telphone":"13126376286" },{ "name":"韩庚", "telphone":"13187656286" },{ "name":"李磊", "telphone":"13189656286" },{ "name":"张三", "telphone":"13182761286" },{ "name":"韩梅", "telphone":"13138726286" },{ "name":"韩寒", "telphone":"13126376286" },{ "name":"韩庚", "telphone":"13187656286" },{ "name":"李磊", "telphone":"13189656286" },{ "name":"张三", "telphone":"13182761286" },{ "name":"韩梅", "telphone":"13138726286" },{ "name":"韩寒", "telphone":"13126376286" },{ "name":"韩庚", "telphone":"13187656286" },{ "name":"李磊", "telphone":"13189656286" },{ "name":"张三", "telphone":"13182761286" },{ "name":"韩梅", "telphone":"13138726286" },{ "name":"韩寒", "telphone":"13126376286" },{ "name":"韩庚", "telphone":"13187656286" },{ "name":"李磊", "telphone":"13189656286" },{ "name":"张三", "telphone":"13182761286" },{ "name":"韩梅", "telphone":"13138726286" } ] var table="<table class='cont' style='display:none;'>" table+="<tr><th style='text-align:center;'>姓名</th><th>电话</th></tr>" $.each(array,function(k,v){ table+="<tr>" +"<td style='background-color:#ccc;'>"+v.name+"</td>" +"<td style='background-color:#ccc;'>"+v.telphone+"</td>" +"</tr>" }); table+="</table>" $("body").append(table); $(".xiazai").on("click",function(){ $(".cont").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""), fileext: ".xls", exclude_img: true, exclude_links: true, exclude_inputs: true }); }); */ $(document).ready(function(){ $('#wwo').click(function(){ var data = {"title":["位置", "日期","hhh"], "data":[ { comp:"天堂", date:"2017/01/01", hh:"haha" },{ comp:"地狱", date:"2017/01/01", hh:"haha" },{ comp:"人间", date:"2017/01/01", hh:"haha" },{ comp:"上帝", date:"2017/01/01", hh:"haha" },{ comp:"上帝", date:"2017/01/01", hh:"haha" },{ comp:"上帝", date:"2017/01/01", hh:"haha" } ] }; if(data == '') return; JSONToExcelConvertor(data.data, "Report", data.title); }); }); function JSONToExcelConvertor(JSONData, FileName, ShowLabel) { //先转化json var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; var excel = '<table style="font-size:16px;">' +'<tr style="font-size:20px;">' +'<td style="text-align:center;" colspan='+ShowLabel.length+'>地址表</td>' +'</tr>' +'<tr>'; //设置表头 $.each(ShowLabel,function(k,v){ excel += "<td style='background-color:blue;color:#fff;'>" + v + '</td>'; }); //换行 excel += "</tr>"; //设置数据 $.each(JSONData,function(k,v){ var bac_col="" if(v.comp=="上帝"){ bac_col="#38f"; }else if(v.comp=="天堂"){ bac_col="pink"; } excel+="<tr>" +"<td style='background-color:"+bac_col+";'>"+v.comp+"</td>" +"<td style='background-color:"+bac_col+";'>"+v.date+"</td>" +"<td style='background-color:"+bac_col+";'>"+v.hh+"</td>" +"</tr>" }); excel += "</table>"; var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel'; excelFile += '; charset=UTF-8">'; excelFile += "<head>"; excelFile += ""; excelFile += "</head>"; excelFile += "<body>"; excelFile += excel; excelFile += "</body>"; excelFile += "</html>"; var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile); var link = document.createElement("a"); link.href = uri; link.style = "visibility:hidden"; link.download = FileName + ".xls"; document.body.appendChild(link); link.click(); document.body.removeChild(link); } </script> </body> </html>

评论收藏

内容反馈