html5中 table数据导出到excel文件
JS代码:
/**
* table数据导出到excel
* 形参 table : tableId ;
* sheetName : 工作薄名
* fileName : 文件名
* linkId :隐藏的链接控件id
*/ var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
template =
'<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"><head>' +
'<!--[if gte mso 9]><xml><x:ExcelWorkbook>' +
'<x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}' +
'</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>' +
'</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>' +
'<![endif]--></head><body><table>{table}</table></body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
}
return function (table, sheetName, fileName,linkId) {
if (!table.nodeType)
table = document.getElementById(table);
var ctx = { worksheet: sheetName || 'Worksheet', table: table.innerHTML }
var dlinkInfo = document.getElementById(linkId);
dlinkInfo.href = uri + base64(format(template, ctx));
dlinkInfo.download = fileName;
dlinkInfo.click();
}
})();
使用样例:
html部分代码
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="container">
<div class="row">
<div class="col-md-6">
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="col-md-4">
<h4 class="modal-title" id="tipMessageLabel"></h4>
</div>
<div class="col-md-2">
<input type="button" onClick="exportDataToExcel()" value="导出到Excel"
class="btn btn-primary">
<a id="dlink" style="display: none;"></a>
</div>
</div>
</div>
</div>
<div style=" height:550px; overflow:scroll;">
<table class="col-lg-12 table table-striped table-bordered"
id="relatedBaseInfoTable" style="max-height: 500px"></table> </div>
JS代码
var exeExportDataToExcel = function () {
var sheetName = $("#tipMessageLabel").html();
var fileName = $("#myModalLabel").html() + ".xls";
tableToExcel("relatedBaseInfoTable", sheetName, fileName, "dlink");
}
html5中 table数据导出到excel文件的更多相关文章
- Qt中将QTableView中的数据导出为Excel文件
如果你在做一个报表类的程序,可能将内容导出为Excel文件是一项必须的功能.之前使用MFC的时候我就写过一个类,用于将grid中的数据导出为Excel文件.在使用了QtSql模块后,我很容易的将这个类 ...
- C#将数据集DataSet中的数据导出到EXCEL文件的几种方法
using System; using System.Collections.Generic; using System.Text; using System.Data; using System.W ...
- C#中dategridview数据导出为excel文件
先从数据库中获取数据,绑定在datagridview中,再从dategridview中导出为excel文件 1.新建窗体,把控件datagridview和按钮设置好,如图
- vb.net-三种将datagridview数据导出为excel文件的函数
第一种方法较慢,但是数据格式都比较好,需要引用excel的 Microsoft.Office.Interop.Excel.dll office.dll #Region "导出excel函数 ...
- 数据导出至Excel文件--好库编程网http://code1.okbase.net/codefile/SerializeHelper.cs_2012122018724_118.htm
using System; using System.IO; using System.Data; using System.Collections; using System.Data.OleDb; ...
- 机房收费系统——在VB中将MSHFlexGrid控件中的数据导出到Excel
机房收费系统中,好多查询的窗体都包含同一个功能:将数据库中查询到的数据显示在MSHFlexGrid控件中,然后再把MSHFlexGrid控件中的数据导出到Excel表格中. 虽然之前做过学生信息管理系 ...
- 将Datagridview中的数据导出至Excel中
首先添加一个模块ImportToExcel,并添加引用 然后导入命名空间: Imports Microsoft.Office.Interop Imports System.Da ...
- VB将MSHFlexGrid数据导出到Excel文件通用功能
1.通用导出Excel功能. 2.将 MSHFlexGrid数据导出到Excel文件通用功能. 3.具体代码如下: '将下列代码保存到一模块文件中,调用方法:Export fgrid1,cd1 Pub ...
- 用node.js写一个简单爬虫,并将数据导出为 excel 文件
引子 最近折腾node,最开始像无头苍蝇一样到处找资料,然而多数没什么卵用,都在瞎比比.在一阵瞎搞后,我来分享一下初步学习node的三个过程: 1 撸一遍NODE入门,对其有个基本的了解: 2 撸一遍 ...
随机推荐
- angular模块详解
原文: https://www.jianshu.com/p/819421ff955a 大纲 1.angular应用是模块化的 2.对模块(Module)的认识 3.模块的分类:根模块和特性模块 4.N ...
- cmder显示UTF-8字体
https://blog.csdn.net/x_iya/article/details/50627829 WIN+ALT+P打开配置 搜索chcp chcp 65001
- udacity android 实践笔记: lesson 4 part a
udacity android 实践笔记: lesson 4 part a 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...
- Android中的动画具体解释系列【3】——自己定义动画研究
在上一篇中我们使用到了位移动画TranslateAnimation,以下我们先来看看TranslateAnimation是怎样实现Animation中的抽象方法的: /* * Copyright (C ...
- nginx源代码分析--ngx_http_optimize_servers()函数
这个函数做了连部分工作:1)以port为入口点 将实用的信息存放到hash表内 2)调用ngx_http_init_listening()函数 对port进行监听 1. 在ngx_http_core_ ...
- [Angular] ChangeDetection -- onPush
To understand how change detection can help us improve the proference, we need to understand when it ...
- MVC4中AJAX Html页面打开调用后台方法实现动态载入数据库中的数据
之前一直用window.onload方法来调用js方法来实现,今天纠结能不能换个方法实现. 非常明显是能够的. 在html前台页面引用js代码例如以下 @Scripts.Render("~/ ...
- Erlang 进制转换
http://www.cnblogs.com/me-sa/archive/2012/03/20/erlang0047.html bnot unary bitwise not integer div i ...
- Android 让文本输入框默认不获取焦点
项目中有个检索功能,页面上有个EditText输入框,打开页面后,焦点默认在EditText上,这样的话软键盘默认就会显示出来,占据大半个屏幕. 后来想办法将这个给去掉了,原先考虑着将焦点赋给页面上的 ...
- 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...