js导出带格式的表格(包括单元格合并,字体样式等)
function HtmlExportToExcelForEntire() {
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 (name, userList) => {
var tableTest = document.createElement('table');
tableTest.innerHTML = this.assemblyData(userList);
var ctx = {
worksheet: name || 'Worksheet',
table: tableTest.innerHTML
}
var alink = document.createElement('a');
alink.href = uri + base64(format(template, ctx));
alink.download = name + ".xls";
alink.style.display = 'none';
document.body.appendChild(alink);
alink.click();
alink.parentNode.removeChild(alink);
}
}
function assemblyData(data) {
var tHeader = `<tr>
<th>编号</th>
<th>负责人</th>
</tr>`;
var tBody = '';
for (var item of data) {
tBody += '<tr>'
tBody +=
`<td>${item.iid}</td>
<td>${item.assignee.name}</td>
`;
tBody += '</tr>'
}
var htmlData = tHeader + tBody;
return htmlData;
}
调用方式:
HtmlExportToExcelForEntire()('导出的表格名称',data);
js导出带格式的表格(包括单元格合并,字体样式等)的更多相关文章
- easyui表格,单元格合并
easyui的合并单元格比较麻烦,官网提供一下方法 $('#tt').datagrid({ onLoadSuccess:function(){ var merges = [{ index:2, row ...
- DataGridView中在新增行时怎样设置每个Cell单元格的字体样式
场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...
- 原生vue实现表格的编辑,包括单元格合并,拆分,删除行/列, 添加行/列
先看效果图如下: 代码看这里: https://github.com/YalongYan/vue-table-edit
- 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的格式写入 ...
- 如何通过Java导出带格式的 Excel 数据到 Word 表格
在Word中制作报表时,我们经常需要将Excel中的数据复制粘贴到Word中,这样则可以直接在Word文档中查看数据而无需打开另一个Excel文件.但是如果表格比较长,内容就会存在一定程度的丢失,无法 ...
- JS:jquery插件表格单元格合并.
公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图: 代码: /* * mergeTable 0.1 * C ...
- 在Asp.Net MVC中使用NPOI插件实现对Excel的操作(导入,导出,合并单元格,设置样式,输入公式)
前言 NPOI 是 POI 项目的.NET版本,它不使用 Office COM 组件,不需要安装 Microsoft Office,目前支持 Office 2003 和 2007 版本. 1.整个Ex ...
- js如何实现动态点击改变单元格颜色?
js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...
- PHPWord中文乱码、单元格合并、动态表格模板解决方案合集
摘要: 最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...
随机推荐
- jenkins构建docker镜像上传到harbor并发布到kubernetes
很早之前写过一篇jenkins集成docker的文章,使用的是CloudBees Docker Build and Publish plugin插件.这篇文章是直接使用shell脚本做的,主要是这次有 ...
- 数位dp——奏响数字数位的美妙乐章
数位dp:处理数字数位关系的一种dp方式. 一般的题目特征十分明显: 1.一般和数字本身有很大关系. 2.一般求数字在区间L,R中的一些信息 3.L,R一般很大,通常能达到long long级别. d ...
- 【codevs4696】等差数列
题目大意:给定 N 个整数组成的集合,向集合中添加一个整数,使得这 N+1 个整数组成等差数列,求这样的整数有多少个. 题解: 引理1:若原集合中只有一个元素,则有无数种可能. 引理2:若原集合中有且 ...
- 移动端Web页面问题解决方案
1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显 ...
- 配置httpd2.4与常见的I/O模型说明
配置httpd2.4与常见的I/O模型说明 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.httpd2.4访问控制 1.基于IP访问控制: 允许所有主机访问:Require a ...
- python---django中STATIC_ROOT和STATIC_URL以及STATICFILES_DIRS
先引入两篇相关文章,从中了解更为详细 django 静态资源配置详解 django静态文件配置 Django的STATIC_ROOT和STATIC_URL以及STATICFILES_DIRS(先看) ...
- bzoj千题计划290:bzoj3143: [Hnoi2013]游走
http://www.lydsy.com/JudgeOnline/problem.php?id=3143 计算每条边经过的概率e[] 然后经过概率多的分配的编号大,经过概率少的分配的编号小 如何计算边 ...
- [整理]html5 WebApp 01
在正式进入WebApp开发之前,有几个问题要解决: 1.我是产品策划:UI风格,功能设计,产品预期效果(如访问量等各类指标) 2.我是UI设计:图片图标制作,我该按怎样的大小来设计? 3.我是前端开发 ...
- J2EE简介
一,J2EE概念: J2EE的全称为,Java2 Platform Enterprise Edition,Java或java2平台企业版,他是基于java平台或java2平台的标准版,保留并扩展了J2 ...
- 20155211 2016-2017-2 《Java程序设计》第六周学习总结
20155211 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 输入/输出 一.InputStream与OutputStream (一)串流设计的概 ...