有时候的需求是从后台获取数据，然后将数据变成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. centos lamp 配置

    # 1. 查看是否有httpd进程正在运行(下图是有的情况) ps -ef|grep httpd

  2. java解析xml文件练习——通过应用包名获取应用图标即其他信息（基于魅族应用商店）

    1.解析包名数据文件(txt文件),并生成包名数组: package jsouphtml; import java.io.BufferedReader; import java.io.File; im ...

  3. JS如何在本地读取json等文件

    JS使用ajax等在本地读取文件的时候,会报如下的错误: 解决方法一: npm install http-server -g  全局安装 http-server 下载完成之后再在目标文件中cmd中输入 ...

  4. jmeter beanshell Typed variable declaration : Object constructor错误

    从数据库取值和响应值做比较,使用beanshell如下: import org.json.JSONArray; import org.json.JSONObject; res_str = prev.g ...

  5. Codeforces Round #467(Div2)题解

    凌晨起来打CF,0:05,也是我第一次codeforces 第一题: 我刚开始怀疑自己读错题了,怎么会辣么水. 判除了0的数字种类 #include <cstdio> ; ]; int m ...

  6. PHP学习 文件操作函数的应用--简单网络留言模板

    <?php /** 网络留言板模式 主要运用到的函数有 fopen fclose flock fwrite fread explode list */ ?> <meta http-e ...

  7. BZOJ 1924 && Luogu P2403 [SDOI2010]所驼门王的宝藏 恶心建图+缩点DP

    记住:map一定要这么用: if(mp[x[i]+dx[j]].find(y[i]+dy[j])!=mp[x[i]+dx[j]].end()) add(i,mp[x[i]+dx[j]][y[i]+dy ...

  8. myeclipse编辑jsp页面卡

    现象 但是遇到了一种情况,编辑jsp页面卡,尤其是使用快捷键ctrl+ 时会很卡. 编辑java页面没问题的,比较流畅. 在jsp页面中一点ctrl+  就卡几秒钟. 按照上篇文章中优化过后只是编辑j ...

  9. 设计模式——原型模式(Prototype)

    用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象.——DP UML类图 模式说明 如果把在一张纸上手写一篇简历的过程看成是类的实例化过程,那么通过原型模式创建对象的过程就是拿着这张纸到复印 ...

  10. 使用fastcgi_cache加速你的Nginx网站

    很久以前在TW上挖了个坑,说nginx的fastcgi_cache是被大家忽视的一大金矿,今天把这个坑填上. 对于变化不太频繁的数据,大家都比较喜欢存Memcached以减少数据库的读取,但还是会有语 ...