将表格table作为execl导出
有时候的需求是从后台获取数据,然后将数据变成execl,进行导出,下载成execl 解决的方法是
一,比较方便的是
这有个插件 可以直接用
https://www.npmjs.com/package/xlsx
二,这种是自己写的一种
1.渲染数据的模板
<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>
<meta charset="utf-8" />
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name><%=sheetName%></x:Name>
<x:WorksheetOptions>
<x:DisplayGridlines/>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml><![endif]-->
</head>
<body><%=tableHTML%>
</body>
</html>
2.点击导出execl 点击导出按钮 然后执行这个函数
// 导出文件
clickExport : function(event) {
var _this=this;
this.renderTable(function(){
// 获取当前的图表类型
var type = 'table';
// sheet名称
var sheetName = '专利信息汇总表 ';
if (type == "table") {
_this.exportExcel(sheetName, _this.$(".execltable").find("table"), event);
}
});
},
// 导出为excel文件
exportExcel : function(sheetName, $table, event) {
var base64 = window.btoa(unescape(encodeURIComponent(this.tableExcelTemplate({
sheetName : sheetName,
tableHTML : $table.prop("outerHTML")
}))));
// 获取下载链接
var uri = 'data:application/vnd.ms-excel;base64,' + base64;
// 设置下载名称
event.target.download = sheetName + ".xls";
// 触发下载
event.target.href = uri;
},
renderTable:function(callback){
var result=this.tableView.getDataExecl();
this.$(".execltable").html(this.tableTemplate({
rows:result
}));
callback();
},
将表格table作为execl导出的更多相关文章
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...
- vue中excal表格的导入和导出
注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx 和 npm install -D script-loader.其 ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- html表格table设置边框
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- css列表list、表格table
列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...
- 表格(Table)隔行变色
在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...
- pre,html转义,abbr缩写,表格table
<pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
随机推荐
- C#z中的虚方法,抽象类
1.虚方法 我在这动物类中定义了一个虚方法 Dosth class Animal { public int Aid; public string Name; public void SetAid(in ...
- 字符串中去除多余的空格保留一个(MS SQL Server)
大约2年前,写过一篇<字符串中去除多余的空格保留一个(C#)>https://www.cnblogs.com/insus/p/7954151.html 今天,Insus.NET使用MS S ...
- Educational Codeforces Round 57 (Rated for Div. 2)D(动态规划)
#include<bits/stdc++.h>using namespace std;char s[100007];long long a[100007];long long dp[100 ...
- cookie中存取中文字符
1.存入中文: Cookie c = new Cookie("username", java.net.URLEncoder.encode(name,"utf-8" ...
- jmeter-逻辑控制器之 交替控制器(实现2个请求每次只执行其中一个)
交替控制器: 案例:两个请求每次只能执行其中一个,可使用交替控制器. 1.线程组->添加->逻辑控制器->交替控制器 2.在控制下添加两个http请求.运行的时候第一次循环执行第一个 ...
- Git Reference
Installing and upgrading Git https://confluence.atlassian.com/bitbucketserver056/installing-and-upgr ...
- 关于map 及 map 骚操作
关于map这个东西 很冷门.................. 但是,这个博客带你稍微了解一下map: map用法:一般当作一个下表无穷大的数组 关于它的骚操作:map的鬼畜用法,可以 ...
- myeclipse svn 在线安装
https://www.cnblogs.com/sxdcgaq8080/p/6000446.html http://subclipse.tigris.org/update_1.8.x
- $.store.book[?(@.category=='fiction')].category
表达式1 $.store.book[?(@.category=='fiction')].category json source { "store": { "book&q ...
- Leetcode题解
前言 Leetcode现在弄了一个Weekly Contest,然后题目又会作为新题目:感觉如果现在还不及时刷题的话可能真的赶不上它题目增长的速度了.......题目会在博客和Github上同步更新的 ...