有时候的需求是从后台获取数据，然后将数据变成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导出的更多相关文章

  1. 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的格式写入 ...

  2. vue中excal表格的导入和导出

    注意:vue中要实现表格的导入与导出,首先要install两个依赖, npm install -S file-saver xlsx  和  npm install -D script-loader.其 ...

  3. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  4. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  5. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  6. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  7. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  8. pre,html转义，abbr缩写，表格table

    <pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...

  9. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

随机推荐

  1. 【eclipse-js验证】

    第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Ena ...

  2. 今天来记录一下关于ajax跨域的一些问题。以备不时之需。

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  3. ffmpeg转码多路输出(二)

    ffmpeg转码多路输出(二)本程序支持一路输入多路输出,可根据map配置自行添加,第1路为纯拷贝,其他2路经过编解码,格式转换缩放和重采样,纯拷贝方面不同格式适应方面还没做全,以后补充.本程序适合多 ...

  4. ajax跨域问题解决方案（jsonp，cors）

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...

  5. 今天实现一个T-sql的小编程，分享给大家，看看就好~（列值赋值）

    介绍:将一个表的某列值插入到另一个表的列里,暂定为表aa和表nn DECLARE @a int set @a=1 while @a<nn.列1.length    --(注:语法不对你可以用查询 ...

  6. image在div中有留白如何解决

    解决办法: 1. 将img图片display:block,即可去掉div和img之间的空白: 2. 将div的line-height设置得足够小,也可以去掉空白,例如div{line-height:5 ...

  7. 扩展JMeter - 创建自定义函数 - String Joiner (翻译)

    JMeter是测试自动化社区中最好的开源工具之一.它提供了所有可能的扩展,可以快速提供我们的测试脚本.为了让我们的生活更轻松,它还让我们通过实现几个接口来提出我们自己的插件. 在本文中,让我们看看如何 ...

  8. 位运算实现四则运算(C++实现)

    前言 Leetcode中有一道这样的题:给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符.返回被除数 dividend 除以除数 di ...

  9. Hive_hdfs csv导入hive demo

    1 create csv file.student.csv 4,Rose,M,78,77,76 5,Mike,F,99,98,98 2 put it to hdfs. # hdfs dfs -put ...

  10. spark_20180328

    // 2.1 条件表达式val x = 2val s = if (x > 0) 1 else -1if (x > 0) "positive" else -1// 返回值 ...