有时候的需求是从后台获取数据，然后将数据变成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. 【mybatis 的foreach的用法】

    foreach一共有三种类型,分别为List,[](array),Map三种. foreach属性 属性 描述 item 循环体中的具体对象.支持属性的点路径访问,如item.age,item.inf ...

  2. 【分析】浅谈C#中Control的Invoke与BeginInvoke在主副线程中的执行顺序和区别（SamWang）

    [分析]浅谈C#中Control的Invoke与BeginInvoke在主副线程中的执行顺序和区别(SamWang) 今天无意中看到有关Invoke和BeginInvoke的一些资料,不太清楚它们之间 ...

  3. 从CGI到FastCGI到PHP-FPM

    从CGI到FastCGI到PHP-FPM 背景 笔者在学习这几个名词的时候,也是被百度到的相关文章迷惑.涉及到的主要名词包括 1. CGI协议 2. CGI脚本 3. PHP-CGI 4. FastC ...

  4. 图解SSH上传安装eclipse

    安装eclipse 步骤: 1.SSH上传eclipse tar文件 2.linux下Computer-->FilesSystem-->soft显示上传的压缩包 3.解压eclipse文件 ...

  5. 洛谷P4287 [SHOI2011]双倍回文（回文自动机）

    传送门 听说有大佬用manacher$O(n)$过此题……太强啦…… 说一下PAM的做法吧.(看了题解之后发现)蛮简单的 我们肯定要先建出回文自动机的 然后如果是枚举每一个节点暴跳fail指针肯定得T ...

  6. 位运算 之（1） 按位与（AND）& 操作

    文章作者:ktyanny 由于位运算直接对内存数据进行操作,不需要转成十进制,因此处理速度非常快. 按位与(Bitwise AND),运算符号为& a&b 的操作的结果:a.b中对应位 ...

  7. Jdk升级到11引起的问题：程序包javax.xml.bind.annotation不存在

    Jdk12 都发布了, 我也下载一个玩一玩吧.刚准备要下载,发现之前已经下载了一个11, 那就11 吧,也不用太新了. 安装了jdk11,习惯性的设置了一下环境变量: JAVA_HOME=D:\too ...

  8. 设计模式UML模型图

    1.抽象工厂(Abstract Factory)模式 意图:为特定的客户(或情况)提供特定系列的对象. 2.类的适配器(Adapter)模式 意图:将一个类的接口转换成客户希望的另外一个接口. 3.对 ...

  9. input和button不同高 和 rem

    rem的使用 浏览器中默认的字体大小是 16px,此时为 100%.当我们在使用 rem 的时候,常常给 html设置为 html{font-size:62.5;},这样的好处是 1rem 刚好为 1 ...

  10. 多级联动的select框

    JS文件: ; (function($, w) { var LinkSelect = function(config) { var opt = { doms: config.doms || [], u ...