使用JS导出页面内容到Excel
- JS代码
<script>
$(function(){ // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
var html = '\<html\>\<head\>\<meta charset="utf-8" \/\>\<\/head\>\<body\>'
+ document.getElementsByTagName('table')[0].outerHTML
+ '\<\/body\>\</html\>'; // 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
var a = document.getElementsByClassName('export')[0]; // 利用URL.createObjectURL()方法为a元素生成blob URL
a.href = URL.createObjectURL(blob);
// 设置文件名 a.download = "【{$user_name}】提成详情表.xls";
})
</script> - 导出按钮
<a href="" class="export" style="text-decoration: none;display: inline-block;width: 100%;">导出详情表</a>
使用JS导出页面内容到Excel的更多相关文章
- js导出table中的EXCEL总结
导出EXCEL通常是用PHP做,可是项目中,有时候PHP后端project师返回的数据不是我们想要的,作为前端开发project师,把相应的数据编号转换为文字后,展示给用户.可是.需求要把数据同一时候 ...
- 如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- clipboard.js实现页面内容复制到剪贴板
clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...
- js导出页面的表格到excel(NB的大神洗了好几个,挑一个记下来)
var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.in ...
- MVC项目中怎样用JS导出EasyUI DataGrid为Excel
在做一中考评项目的时候,遇到了这么一个需求.就是把评教后得到的老师的成绩导出为Excel.事实上需求非常普通.实现起来有些复杂.由于老师考评不但有固定的考核项,还有额外加分项.于是我们就抽出来了一个表 ...
- JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
1.资源文件或依赖 <script type="text/javascript" src="./js/canvg2.js"></script& ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- 将页面内容转为Excel下载
使用:method1(table); 说明:参数table为table元素的ID; var idTmr; function getExplorer() { var explorer = window. ...
随机推荐
- 深入理解Aspnet Core之Identity(3)
主题 账户管理一个比较常见的功能就是密码强度策略,Identity已经内置了一个通用的可配置的策略,我们一般情况下可以直接拿来用即可.本篇我会介绍一些Identity内置的密码策略类:Password ...
- wpf简单进度条
UserControl x:Class="WpfApplication1.UserControl2" xmlns="http://schemas.microsoft.co ...
- AJPFX简评:MT5平台
MetaTrader 5全面改进的图表和扩展的功能 MetaTrader软件开发商在MT4获得全球交易商全面好评之后,又再次研发推出了更为先进的MT5交易软件. MT5的主要特征●改进的图表和即时 ...
- Day 24 继承
# 一.什么是继承 # 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可成为基类或超类,新建类称为派生类或子类.# python中类的继承分为:单继承和多继承cla ...
- 日常一些出现bug的问题
1.Fatal signal 4 (SIGILL), code 1, fault addr 0xca31569e in tid 8033 (r.myapplication) fault addr : ...
- Cordova - OSX中,nodev7.5.0无法安装cordova解决方法!
OSX:10.12.3 node:v7.5.0 结果很搞笑啊,先前怎么安装都不成功,现在居然安装成功了!我认为安装失败最大的原因是:你不能访问谷歌的原因!!!! 使用最新稳定版,有助于安装,可以顺便安 ...
- linux下程序编译出错解决方法
一 *** No rule to make target 'subscribe_pkg/CMakeFiles/subscribe_pkg_node.dir/build'. 停止.CMakeFiles/ ...
- Mutual Training for Wannafly Union #6 E - Summer Trip(并查集)
题目链接:http://www.spoj.com/problems/IAPCR2F/en/ 题目大意: 给m个数字代表的大小,之后n组数据,两两关联,关联后的所有数字为一组,从小到大输出组数以及对应的 ...
- Storm Trident API
在Storm Trident中有五种操作类型 Apply Locally:本地操作,所有操作应用在本地节点数据上,不会产生网络传输 Repartitioning:数据流重定向,单纯的改变数据流向,不会 ...
- [Swift实际操作]七、常见概念-(10)使用UserDefaults和归档方式存取用户数据实际操作
在项目开发之中,你会经常需要将一些数据存储在本地,以便记录用户生产的数据或操作习惯.在项目文件夹上带点击鼠标右键.弹出右键菜单.本文将为你演示,存储用户数据的两种常用方式. 选择菜单中的创建新文件选项 ...