纯前台js json导出到excel，不与后台交互

最新推荐文章于 2024-09-19 17:31:29 发布
最新推荐文章于 2024-09-19 17:31:29 发布
阅读量1.2w 收藏 9
点赞数

上代码

[javascript] view plain copy
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  4.     <script type="text/javascript" src="jquery.min.js"></script>  
  5.     <script type="text/javascript">  
  6.         $(document).ready(function(){  
  7.             $('#wwo').click(function(){  
  8.                 var data = {"title":[{"value":"集团", "type":"ROW_HEADER_HEADER", "datatype":"string"}, {"value":"日期", "type":"ROW_HEADER_HEADER", "datatype":"string"}],"data":[[{"value":"好好", "type":"ROW_HEADER"}, {"value":"2015-08-24", "type":"ROW_HEADER"}]]};  
  9.                 if(data == '')  
  10.                     return;  
  11.                 JSONToExcelConvertor(data.data, "Report", data.title);  
  12.             });  
  13.         });  
  14.   
  15.         function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {  
  16.             //先转化json  
  17.             var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;  
  18.               
  19.             var excel = '<table>';      
  20.               
  21.             //设置表头  
  22.             var row = "<tr>";  
  23.             for (var i = 0, l = ShowLabel.length; i < l; i++) {  
  24.                 row += "<td>" + ShowLabel[i].value + '</td>';  
  25.             }  
  26.               
  27.               
  28.             //换行  
  29.             excel += row + "</tr>";  
  30.               
  31.             //设置数据  
  32.             for (var i = 0; i < arrData.length; i++) {  
  33.                 var row = "<tr>";  
  34.                   
  35.                 for (var index in arrData[i]) {  
  36.                     var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;  
  37.                     row += '<td>' + value + '</td>';  
  38.                 }  
  39.                   
  40.                 excel += row + "</tr>";  
  41.             }  
  42.   
  43.             excel += "</table>";  
  44.   
  45.             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'>";  
  46.             excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';  
  47.             excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';  
  48.             excelFile += '; charset=UTF-8">';  
  49.             excelFile += "<head>";  
  50.             excelFile += "<!--[if gte mso 9]>";  
  51.             excelFile += "<xml>";  
  52.             excelFile += "<x:ExcelWorkbook>";  
  53.             excelFile += "<x:ExcelWorksheets>";  
  54.             excelFile += "<x:ExcelWorksheet>";  
  55.             excelFile += "<x:Name>";  
  56.             excelFile += "{worksheet}";  
  57.             excelFile += "</x:Name>";  
  58.             excelFile += "<x:WorksheetOptions>";  
  59.             excelFile += "<x:DisplayGridlines/>";  
  60.             excelFile += "</x:WorksheetOptions>";  
  61.             excelFile += "</x:ExcelWorksheet>";  
  62.             excelFile += "</x:ExcelWorksheets>";  
  63.             excelFile += "</x:ExcelWorkbook>";  
  64.             excelFile += "</xml>";  
  65.             excelFile += "<![endif]-->";  
  66.             excelFile += "</head>";  
  67.             excelFile += "<body>";  
  68.             excelFile += excel;  
  69.             excelFile += "</body>";  
  70.             excelFile += "</html>";  
  71.   
  72.               
  73.             var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);  
  74.               
  75.             var link = document.createElement("a");      
  76.             link.href = uri;  
  77.               
  78.             link.style = "visibility:hidden";  
  79.             link.download = FileName + ".xls";  
  80.               
  81.             document.body.appendChild(link);  
  82.             link.click();  
  83.             document.body.removeChild(link);  
  84.         }  
  85.     </script>  
  86. </head>  
  87. <body>  
  88.     <input type="button" id="wwo" value="导出" />  
  89. </body>  
  90. </html>  

附件是tableExport代码

http://download.csdn.net/detail/a410147597/9052583
CodingSir
关注
Spring Boot+AngularJS导出excel
dalangzhonghangxing的专栏
09-06 4707
这次在项目开发中，需要实现考题导出，由于本项目是使用Spring Boot+AngularJs的开发模式，原来那种表单式的请求方式不是很便捷，以下是基于AngularJs异步请求的代码。 首先是JS代码 function exportExam() { $http({ url: url + "export",
js导出excel文件的简洁方法(推荐)
01-19
用js可以直接在jsp页面导出数据到excel文件，方法很简洁，如下： 第一，准备一个jsp（暂时取名为export.jsp），内容为: <%@ page contentType=text/html; charset=GBK%> <% String context = request.getParameter(sContent); response.setHeader(Content-type,application/vnd.ms-xls); response.setHeader(Content-Disposition,attachment;filenam
纯js-json导出excel
02-15
纯js-json导出excel,下载文件为deml,直接可拓展至程序中
宝藏级：将Json文件里的Json数据导入Excel
最新发布
qq_31107685的博客
09-19 2994
宝藏级：将Json文件里的Json数据导入Excel
JSON对象转成Excel导出
02-01
JSON对象转成Excel导出。例子： var option = {}; option.fileName = '多行业导出' option.datas=[ { sheetData:sd1, sheetName:'用电情况', //sheetFilter:['two','one'], sheetHeader:sh1 }, { sheetData:sd3, sheetName:'增速趋势', sheetHeader:sh3 } ]; var toExcel=new ExportJsonExcel(option); toExcel.saveExcel();
前端 json 导出 excel
Abel_yang的博客
12-01 1849
最近做个导出功能，秉着前端能做的是绝不扔给后台想法，查了网上资料，大致两种，一种利用html直接输入excel ，一种是利用github上json 转excel。 首先说下第一种： function JSONToExcelConvertor(JSONData, FileName, ShowLabel,worksheet) { //先转化json var arrData =
JS导出JSON到Excel表格
weixin_30725315的博客
09-05 227
<a href="javascript:;" id="export">导出</a> <script> $("#export").click(function () { var Title = [{ "value": "姓名" }, { "value": "课题组" }, { "value": "手机" },...
前端json导出excel方法
m0_49515138的博客
12-10 999
<template> <div class="esbody"> <es-search ref="esQuery" :ay-list="ayList" v-on:esQueryFormComplete="reQuery"></es-search> <query-Estable ref="esTable" :dataList="dataList" v-on:sorterChange="sorterChange"></query
几种前端json导出excel方法
weixin_30326741的博客
01-05 1148
第一种导出excel无需自己设置，直接根据json生成 （缺点：json数据全部展示，且只能按获取数据的顺序显示） //json数据转excel function JSONToExcelConvertor(JSONData, FileName) { //先转化json var arrData = typeof JSONData != '...
JS 读取excel文件内容 和 将json数据导出excel文件
weixin_44646763的博客
11-16 2588
JS 读取excel文件内容 和 将json数据导出excel文件
json导出excel
drawlessonsfrom的博客
08-31 540
关键代码 /* json导出 @Parameter JSONData:json数组 @Parameter FileName：导出文件名（不要后缀） @Parameter title：表头（数组，如['姓名', '年龄', '联系方式', '详细地址']） @Parameter filter */ function jsonExcel(JSONData, FileName, title, filter) { if (!JSONData) return; //转化json为o
GridView选择性导出Excel解决方案
10-26
方案一：通过前台JavaScript获取选中行的主键信息，并将其以JSON格式传送到后台。具体实现步骤包括前台通过按钮触发导出事件，然后调用JavaScript函数，该函数检测GridView中的复选框是否被选中，如果选中，则将对应...
JavaScript超市收银系统源码：前台后台管理解决方案
2. 前后端分离架构：项目的前台和后台分离设计符合现代Web开发的趋势，前台负责与用户交互，后台负责处理业务逻辑和数据存储。 3. Node.js服务器开发：从文件名称中可以看出，该项目使用Node.js作为服务端开发平台...
纯前台js json导出到excel，不与后台交互
oYuLian的博客
07-06 2590
&lt;html&gt;   &lt;head&gt;       &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;       &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/s
GridView选择性导出优化：前后端协作与高效方案
在本文档中，主要讨论了...总结来说，GridView的选择性导出Excel解决方案涉及到前端用户界面交互、数据传递、服务器端数据查询和Excel导出等多个环节，开发者需要根据实际情况权衡性能和用户体验来设计最佳方案。
json导出Excel
weixin_55017680的博客
01-10 1441
ajax请求获得json，然后导出Excel文件 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js"></script> </head> <body> <h...
json数据导出到excel中
x_1999的博客
08-12 1498
json数据导出到excel中
JSON文件导出Excel
weixin_45717355的博客
11-09 290
#coding=utf-8 import json, xlwt json_path = r'json文件地址' with open(json_path) as f: monitor_all = json.load(f) # print(type(score_all)) book = xlwt.Workbook() # 创建excel文件 sheet = book.add_sheet('sheet1') # 创建一个表 title = ['列1', '列2',
将Json文件里的Json数据导入Excel
weixin_44773906的博客
10-29 9110
将Json文件里的Json数据导入Excel
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值